清浮动的五种方法

清浮动的两种情况：

1.父级没有高度时，父级的高度是由子元素撑开的，但子元素浮动后，父元素的高度无法被撑开，所以需要清浮动；

2.新加入的兄弟级标签，希望不受之前浮动元素的影响，则需要清浮动。

---

清除浮动的五种常用方法：

1.空标签清浮动

给空标签设置clear : both;

优点：简单易懂，容易掌握；

缺点：会出现大量无语义的空标签，不利于维护。

补充：clear清浮动

书写方式——clear : left / right / none / both;

left : 左侧不允许有浮动元素；

right : 右侧不允许有浮动元素；

none : 允许浮动元素在两侧；

both : 不允许浮动。

2.<br>标签清浮动

<br>标签自带属性：<br clear = "all" />;

优点：比空标签清浮动方式语义性较强；

缺点：结构与样式未分离。

3.父级设置overflow

原理：让父级能够紧贴其内容，实现清浮动；

overflow：hidden | auto ;

hidden：超出内容隐藏；

auto：默认属性，在需要时剪切内容并添加滚动条；

优点：不存在结构和语义化问题；

缺点：hidden在内容增多时会导致内容被隐藏；

            auto在多个嵌套后，有时会造成内容全选；

4.子级元素浮动，父级元素也浮动

优点：不存在结构和语义化问题，代码量少；

缺点：使得与父级相邻的元素的布局会受影响。

5.after伪元素清浮动

原理：相当于用一个高度为0的块来代替空标签；

.clearfix : after {

    display: block;

    clear: both;

    height: 0;

    content: “\200B”;

}

优点：结构语义化正确，代码量少；

缺点：盒模型属性已改变。

---

伪元素的特性

伪元素after和before的特性

两个伪元素会在页面元素之前或之后插入一个元素

伪元素在页面中生成的元素是行元素

伪元素after和before兼容

.test : before, .test  before {}

.test : after, .test  after {}

说明：一个是冒号分隔，一个是空格分隔。

前者兼容IE8+及其它现代浏览器；后者兼容IE6/7。