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。使父级元素也浮动起来