清除浮动带来的影响

1. 给父盒子定高度

缺点:不实际(有些盒子根本没办法固定高度)

2.给父盒子加overflow:hidden

因为这个属性可以触发BFC规则（触发了高度计算的那个规则 浮动子元素就可以参与计算了）

缺点：overflow:hidden溢出隐藏 会把故意溢出的盒子清除掉

3.特定属性 clear:left/right/both

写在浮动流的下边

是盒子3的浮动气流影响了父盒子的高度 所以在盒子3下去清除浮动影响

只有块类型的元素才可以清除浮动影响

缺点：

在结构里添加了很多没有展示内容的空元素 导致我们的结构树冗杂 不利于后期维护 没有形成结构与样式 相分离

方法4：终极方法

真元素：真的存在body里的真实HTML标签

伪元素：由css通过css的伪元素选择器实现的一个元素

.clearfix::after ,.clearfix::before {
    content:'',
    display:block;
    clear:both;
    
}

   .clearfix::after,.clearfix::before  {
            content: '.';
            /* 防止低版本浏览器解析''里的空格 表现成为一个小方块 */
             line-height: 0;
             height: 0;
             font-size: 0;
              /* 伪元素默认是行内元素 而清除浮动影响需要块类型的元素 */
            display: block;
            clear:both;

        }

伪元素:

每一个父元素内部可以通过css创造2个伪元素 (一个是在所有内容之前，一个在所有内容之后)

伪元素作为这个父元素孩子存在

//在父元素的所有内容之前插入一个伪元素
父元素::before  {
    content:'';//设置文本内容
    
}
//在父元素的所有内容之后插入一个伪元素
父元素::after {
    content:'';//设置文本内容
    
}

伪元素创造出来的元素类型为行内类型

用在不影响大盒子主题内容的小提示盒子

方法5：解决IE6/7/8浏览器无法识别伪元素::after ::before问题
在浮动元素的父元素上加入css属性

            overflow: auto; /*ie8*/
            *zoom: 1;/*ie7*/

浮动对元素显示模式的影响

行内，行内块，块+浮动—》行内块的特点