CSS之float and clear float 浮动和清除（闭合）浮动 目录

1.背景介绍

2.知识剖析

3.常见问题

4.解决方案

5.编码实战

6.扩展思考

7.参考文献

8.更多讨论

1.背景介绍 在那个“蛮荒”的年代，Float的设计初衷不是为了什么高大上的布局，而仅仅是文字环绕效果。

浮动出现的意义仅仅是让文字来环绕图片而已

那为什么要知道这个呢？明白了float的设计初衷，就可以明白float特有的行为表现了。

2.知识剖析 浮动模型也是一种可视化格式模型，浮动的框可以左右移动（根据float属性值而定），直到它的外边缘碰到包含框或者另一个浮动元素的框的边缘。浮动元素不在文档的普通流中，文档的普通流中的元素表现的就像浮动元素不存在一样。

            类似于absolute绝对定位。
复制代码

2.1 文档流 —— 一个简单的例子

将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素。

从头到尾按照文档的顺序，该在什么位置就在什么位置。

不浮动

2.2 浮动，脱离文档流

通过使用浮动属性，可以使元素脱离文档流，上浮到文档流之上，随后可以改变其位置的现象。参看下边的图片,浮动的红色块已经上天了，跟黄绿

                两个块已经不再一个层面上了。
复制代码

通过使用浮动属性，可以使元素脱离文档流，上浮到文档流之上，随后可以改变其位置的现象。参看下边的图片,浮动的红色块覆盖了了绿色块。

如果包含块儿太窄无法容纳水平排列的三个浮动元素,那么其它浮动块儿向下移动,直到有足够的扣减,如果浮动元素的高度不同,那么下下移动的时候可能被卡住

2.3 浮动的属性值

浮动的属性值有三个：float：none；float：left；float：right；

3.常见问题及为什么要清除浮动 （1）内容被覆盖

（2）边框不能撑开

（3）高度塌陷

（4）如果浮动元素的高度不同,那么向下移动的时候可能被卡住等等。。。

4.解决方案 方法1：父级div定义 height

父级div手动定义height

设置父元素高度

缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题

方法2：

使用clear属性：在相同的父元素中，浮动的子元素之后添加一个空标签，设置样式为："clear：both;"标签可以是div，也可以是p等块元素。

使用clear属性

缺点：可以想象通过此方法，会添加多少无意义的空标签，在后期维护中比较麻烦。

方法3：对父元素设置overflow的样式，即overflow:

                auto/hidden;overflow的包裹性使得设置了overflow：hidden属性的div有了高度，同时把图片封在了里面
复制代码

设置overflow

缺点：内容增多时候容易造成不会自动换行导致内容被隐藏掉，不能和position配合使用，无法显示需要溢出的元素；要是里面的元素要是想来个margin负值定位或是负的绝对定位，岂不是直接被裁掉了，所以此方法是有不小的局限性的。

据说是最好的方法:after

它就是利用:after和:before来在元素内部插入两个元素块，从面达到清除浮动的效果。

                其实现原理类似于clear:both方法，只是区别在于:clear在html插入一个div.clear标签，而after利用其伪类clear:after在元素内部增加一个类似于div.clear的效果(clearfix用在父元素上面)。下面来看看其具体的使用方法：
复制代码

.div1 {

background:#000080;

border:1px solid red;

}

.div2 {

background:#800080;

border:1px solid red;

height:100px;

margin-top:10px

}
复制代码

.left {

float:left;

width:20%;

height:200px;

background:#DDD

}
复制代码

.right {

float:right;

width:30%;

height:80px;

background:#DDD

}
复制代码

.clearfloat:after {

display:block;

clear:both;

content:"";

visibility:hidden;

height:0

}
复制代码

.clearfloat {

zoom:1

}
复制代码

Left

Right

div2

缺点：使用方式不当会造成代码量增加，初学者不理解原理，要两句代码结合使用才能让主流浏览器都支持。

5.编码实战 6.扩展思考 还有没有更实用的方法清除浮动？

7.参考文献 参考一：清除浮动的几种方式

参考二：深入理解之float浮动

参考三：css 明白浮动的几种方式

今天的分享就到这里啦，欢迎大家点赞、转发、留言、拍砖~

技能树.IT修真院

“我们相信人人都可以成为一个工程师，现在开始，找个师兄，带你入门，掌控自己学习的节奏，学习的路上不再迷茫”。

这里是技能树.IT修真院，成千上万的师兄在这里找到了自己的学习路线，学习透明化，成长可见化，师兄1对1免费指导。

快来与我一起学习吧~http://www.jnshu.com/login/1/21109035