清除浮动的7种方法图解

1、定位方式

 1、1普通流：就是在html文档中从左到右，从上到下，按顺序排列下来的元素。

 1、2浮动：脱离文档流，浮动方向有向左向右。浮动元素会脱离文档流并向左/向右浮动，直到碰到父元素或者另一个浮动元素。

 1、3绝对定位：脱离文档流，fixed相对于body绝对定位。absolute相对于非static属性的第一个祖先元素定位；

其实我们可以把这3种定位方式当成3层不同的面，重叠在一起；

虽然从视觉上看，似乎是在一块的。

2、浮动的特征

  脱离了普通流；所以浮动的元素对普通流的元素没有任何的影响；！！！

  可以观察一下父元素的属性设置：因为父元素高度没有被展开，所以它的的高度为0；便于观察，我们将他的边框设置成5px；

  所以下一个父元素就紧接在后面，也不受到z1、2、3、的影响；

3、清除浮动

如果清除浮动；
其实我们发现，最重要的原因就是父元素的高度无法展开，从而导致在页面的布局出现混乱、

3、1 给父元素设置高度；

这样就不会影响到页面的布局；
但是子元素还是浮动的元素！！

3、2使用clear

clear属性不允许被清除浮动的元素的左边/右边挨着浮动元素，底层原理是在被清除浮动的元素上边或者下边添加足够的清除空间。

通过在别的元素上清除浮动来实现撑开高度的， 而不是在浮动元素上。

3、2给父级元素设置伪类

.f:after{
clear: both;
content: ” “;
visibility: hidden;
height: 0;
display: block;
}

3、3给父元素添加属性 overflow：hidden；

浏览器会自动检查浮动区域的高度；

3、4给父元素添加属性：overflow：auto

3、5将父级元素也变成浮动元素：

那么整体下来都是浮动元素，子元素就会对父元素产生影响；
高度就自然展开；

但是但是宽度变了。如果想它它占满一行，可以另外设置display：block；

3、6给父元素设置属性：display：table

3、7在子元素后面加一个br、p、ul……标签、属性为clear：both；

a标签的时候就用不了。具体可以尝试一下；

4、清除浮动，并不是让子元素不浮动！

！！！其实是让父元素能够展开，能有高度！！！

高度！高度！