css清除浮动float,CSS 浮动(Float) 清除浮动

说浮动之前，先说一些别的东西

标准文档流

宏观地讲，我们的web页面和photoshop等设计软件有本质的区别：web页面的制作，是个“流”，必须从上而下，像“织毛衣”。而设计软件，想往哪里画个东西，都能画

标准文档流的特性

1.空白折叠现象(无论多少个空格、换行、tab，都会折叠为一个空格)

2.高矮不齐，底边对齐

3.自动换行，一行写不满，换行写

行内元素和块级元素

行内元素和块级元素的区别：(非常重要)

行内元素

与其他行内元素并排；

不能设置宽、高。默认的宽度，就是文字的宽度

块级元素

霸占一行，不能与其他任何元素并列

能接受宽、高。如果不设置宽度，那么宽度将默认变为父亲的100%

块级元素和行内元素的相互转换

我们可以通过display属性将块级元素和行内元素进行相互转换

display:inline;可以把块级元素转换为行内元素

display:block;可以把行内元素转换为块级元素

再说一个：display:inline-block;可以把行内元素或块级元素设置为 行内块元素 ，可以并排显示，并且可以设置块级元素的属性

标准流里面的限制非常多，导致很多页面效果无法实现。如果我们现在就要并排、并且就要设置宽高，那该怎么办呢法是：脱离 标准文档流！

css中一共有三种手段，使一个元素脱离标准文档流：

浮动

绝对定位

固定定位

浮动(float)

float:left | right | none ;(默认不浮动none)

浮动的元素脱标

在一个父元素内部，如果一个元素浮动了，那么它就脱离了标准文档流，后面的元素就让向上排

浮动并没有完全地脱离了标准文档流(但是它具有破坏性，所以可以用Flex布局，想了解Flex布局，请参考我的 Flex布局教程)，如果后面的元素内部有文字，这些文字会环绕在浮动元素的周围，产生字围效果

上图显示，3号如果有足够空间，那么就会靠着2号。如果没有足够的空间，那么会靠着1号。如果没有足够的空间靠着1号，3号自己去贴左墙，不过3号贴左墙的时候，并不会往1号里面挤，而是往1号下面排列，如果小到极限时，里面的浮动的子元素宽度是不会改变的

同样，float还有一个属性值是right，这个和属性值left是对称的。

浮动的元素有“字围”效果

来一张图，如下：

上图中，div本身是块级元素，如果不设置widh，它会单独霸占整行；但是，设置div浮动后，它会收缩

如果一个元素没有设置高度，它的高度是靠里面的内容撑起来的。如果父元素内部元素都浮动了，那么会造成父元素的高度塌陷

同步

如果多个元素浮动了，那么这们就会并排显示，如果都是同一个方向的浮动，它们会紧紧地贴在一起(自己动手写一下)

如果一个元素浮动了，先向上移动，直到贴靠到父元素的边界，接着，如果是左浮动，就向左移动，直到移动到父元素的左边界，如果是向右浮动，就向右移动，直接移动到父元素的右边界

补充：

补充

浮动只对父元素和以后的元素有影响，对之前的元素没有影响

浮动的清除(重点)

元素浮动会造成的影响：

对父元素的影响(父元素的高度坍塌)

解决办法：

加高法 给父元素设置高度，就不会塌陷(简单，基本不用，大部分情况下父元素的高度是需要子元素撑起来的)

overflow:hidden 简单，使用overflow:hidden父元素的高度会随着子元素的高度变化而变化。overflow:hidden本职工作是用来处理溢出 在使用过程中，需要注意子元素如果想要超出父元素高度，此时overflow:hidden就不适合了

隔墙法(clear:both) 在所有子元素后面加一个空的div 在这个div上面加clear:both，就可以清除浮动(分为内墙法和外墙法，本质上一样)，clear:both是专业清除浮动的

对后面兄弟元素造成的影响(兄弟元素会向上移动)

解决办法：

在受影响的元素上面的加 clear:both(参考对父元素的影响)

项目中最常用的清除浮动的办法

利用伪元素 after

其实很简单,就是写一个清除浮动的类,哪个元素想要清除浮动,只需加上 class=”clearfix” 就可以,非常简单

清除浮动类的代码:

.clearfix:after{

content=””;

display:block;

clear:both;

height:0;

}

复制代码

由于浮动具有破坏性,所以后面就有一个新的Flex布局方案,用起来别提多爽了,绝对让你爽到爆,还简单容易上手,想了解 Flex布局 ,请参考我的文章：Flex 布局教程

^_<

相关资源：漂浮截图工具-教育工具类资源

来源：一只有思想的猴子