踩坑：消除浮动

又遇到了浮动问题，有一点点收获，虽然还不完整，以后再补充

先给出一个浮动的栗子：

.div { width:500px; background:green; padding:10px }
.div_left, .div_right { background: red; width:200px; height:150px }
.div_left { float: left; }
.div_right { float: right; }

<div class="div"> 
    <div class="div_left">float left</div>
    <div class="div_right">float right</div>
</div> 

使用 clear 属性来消除浮动

w3c 上 clear 的说明：clear 属性定义了元素的哪边上不允许出现浮动元素，如果声明为左边或右边清除，会使元素的上外边框边界刚好在该边上浮动元素的下外边距边界之下

上图的情况，是一种子元素全为浮动元素，由于浮动元素脱离文档流，父元素的高度无法自适应

所以需要想办法把父元素“撑大”，有两种解决方法：

1. 在浮动元素后面添加 <div style="clear: both;"></div>

<div class="div"> 
    <div class="div_left">float left</div>    
    <div class="div_right">float right</div>
    <div style="clear: both;"></div>
</div> 

 为了是原理更加明显，我稍微修改了一下代码：

<div class="div"> 
    <div class="div_left">float left</div>
    <div class="div_right">float right</div>
    <div style="clear: both; background:yellow;">aaa</div>
</div> 

 

我们可以发现，不仅父元素被撑开了，消除元素还换行了，正好在浮动元素之下（对应上面 clear 说明）

 

2. 在父元素上添加 clear 样式

.div:after { clear:both; content: ''; display: block; }

同样修改一下代码：

.div:after { clear:both; content: 'aaa'; display: block; background: yellow; }

效果一模一样

 

还发现一个小细节：

:after 选择器在被选元素的内容后面插入内容，我一直以为黄框框是加在绿框框下面，实际上是在绿框框的里面。所以，内容后面插入的内容也是包括在被选元素里面的

 

占坑：

http://blog.sina.com.cn/s/blog_709475a10100wkdj.html

http://www.divcss5.com/rumen/r424.shtml