float的正确理解方式 - 毛毛亮不想做开发

参考资料：http://blog.sina.com.cn/s/blog_709475a10100wkdj.html

几点常识：

常见的块级元素：h1~h6、p、div、ul、table
块级元素独占一行，可以设置宽高以及边距

常见的行内元素：span、a、input、select
行内元素不会独占一行，设置宽高行距等不会起效。

一 浮动元素会自动变块级元素

<div style="height: 200px; width: 200px;">     <span style="float: left; width: 150px; height: 150px; margin: 5px; padding: 5px;     border: solid 1px red; background-color: Olive;">浮动元素span</span> </div> <div style="height: 200px; width: 200px;">     <span style="width: 150px; height: 150px; margin: 5px; padding: 5px; border: solid 1px red;     background-color: Olive;">浮动元素span</span> </div> 

二 浮动元素后的非浮动元素问题

浮动元素后面的块级元素（非浮动）会在浮动元素的下面显示；
浮动元素后面的行内级元素（非浮动）会在浮动元素的上面显示；

    <div style="width: 600px; height: 500px; border: solid 1px #000000; background-color: #C7EEFF;">    <div style="    float: left;    width: 250px;    height: 250px;    border: solid 1px Aqua;    background-color: #03A9F4;    margin: 10px 0 0 10px;    ">    浮动DIV</div>    <div style="background-color: #1491C9; border: solid 1px green; width: 300px; height: 150px;">    跟在浮动元素后边的DIV</div>    <span style="background-color: #E3EDF2; border: solid 1px green; /* margin: 0 0 0 -50px; */">    跟在浮动元素后边的span</span>    </div>

三 多个并列同方向浮动元素高度不一致问题

多个同方向浮动元素若是高度不一致的话，很可能会得到意外的效果，跟你想要的布局差别很大。
多个同方向浮动元素一般是按照流式布局，一行满了则自动换行，也就是类似于以下效果：

四 子元素全为浮动元素高度自适应问题

由于元素浮动后脱离了文档流，所以父元素是无法根据元素来自适应的。解决此问题最常用的办法由两种：

1.添加隐藏的div

<div style="clear:both;height:0px;"></div> 

2.:after伪类

.clearfix:after{visibility: hidden;display: block;font-size: 0;content: ".";clear: both;height: 0;}* html .clearfix{zoom: 1;}*:first-child + html .clearfix{zoom: 1;}</style><div class="clearfix" style="border: 2px solid red;"><div style="float: left; width: 80px; height: 80px; border: 1px solid blue;">TEST DIV</div></div>

五 :after content的结合

参考资料

content

content是用来生成内容的。

h2:before {   content: "我是额外文字！";}<h2>我是标题</h2>

六 :after伪类+content 清除浮动的影响

    <style type="text/css">        .box{padding:10px; background:gray;}        .fix{*zoom:1;}        .fix:after{display:block; content:"clear"; height:0; clear:both; overflow:hidden; visibility:hidden;}        .l{float:left;}    </style>    <div class="box fix">        <img class="l" src="http://image.zhangxinxu.com/image/study/s/s256/mm1.jpg" />    </div>