web-前端历程（2）浮动与清除浮动

web-前端历程（2）浮动与清除浮动

简单的来看，这里的（layout）-div是无法显示出背景黄色属性的

原因：子元素left和right是直接浮动的，这时脱离了普通的文档流，进而无法直接的撑起父级元素的高度：即认为父级元素塌陷！（所以要撑起来呀(^__^) 。。。）

<style type=”text/css”>
<!–
*{margin:0;padding:0;}
body{font:36px bold; color:#F00; text-align:center;}
#layout{background:#FF9;}
#left{float:left;width:20%;height:200px;background:#DDD;line-height:200px;}
#right{float:right;width:30%;height:80px;background:#DDD;line-height:80px;}
–>
</style>
<div id=”layout”>
<div id=”left”>Left</div>
<div id=”right”>Right</div>
</div>

解决方法：清除浮动
我在理解这个问题的出现了一个误区，清除who‘s的浮动，清除指定元素的周围区域是否能够出现浮动元素！
（不是清除自己的浮动）

解决方案：
1.空的块级元素定义css并触发BFC

简单来说：
step1：创建空白

step2:clear：both；hight：0；overflow：hidden；

2..clearfix

3。使父级元素也浮动起来