<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>二列布局</title><style type="text/css">body{padding:0;margin:0;}div{ text-align:center; line-height:50px;}.main{background-color:#000;width:100%;margin:0 auto;}.left{background-color:blue;width:20%;height:600px;float:left;}.right{background-color:#CF6;width:79%;height:600px;float:right;}</style></head><body><div class="main"><div class="left">left</div><div class="right">right</div></div></body></html>
3 回答
不再热情似火
TA贡献15条经验 获得超6个赞
浮动之后，浮动元素的line-box被破坏了，也就是失去了高度。所以父元素坍缩。
可以通过触发BFC的方式来清除浮动的影响，触发BFC方式 有， overflow设置除了visible以外的值，position设置absolute，fixed，float:left || right; display:inline-block || table-cell，这些样式是设置在父元素上的。推荐用：overflow:hidden就好了
点击展开后面1条
- 3 回答
- 0 关注
- 1920 浏览
添加回答
举报
0/150
提交
取消