清除浮动的方法

清除浮动

• 为什么要清除浮动？

  在所有子元素浮动起来以后，需要清除浮动，如果不清除，因为会影响后面也面的布局。
  

清除浮动的方法：

1、给父类元素设置高度。（不推荐使用）

理由：设置高度后，高度固定，内容超出固定高度时，不能自适应，影响内容显示。

2、给父类添加浮动（不推荐使用）

理由：会影响后面的布局

3、添加 over flow :hidden 清除浮动 (不推荐使用)

• 优点：简单
• 缺点：可能会照成其他元素的内容增多时不换行隐藏。
• 

4、把父盒子设置成行内快（不推荐使用）

• 使用： display:inline-block
• 不推荐使用，会影响后面元素的布局
  

5、专门清除浮动的属性（clear）

• clear属性值：both（清除所有浮动） left：（清除左浮动） rifht：（清除右浮动）
• clear本质：清理元素（拥有clear属性的元素）的顶部添加足够多的外边距，使清理元素的顶部边缘下降到浮动元素的下面。
• 不足：
  1.浮动元素的父类仍然没有高度，父类塌陷没有解决。
  2.清理元素的margin-top会失效，其他三个方向仍然有效。
  

6、设置空标签，添加（clear：both）

• 优点：简单
• 缺点：添加一个无意义的空标签，有违结构与表现的分离，后期维护也会麻烦
  

伪元素

• 定义：是指它们不是真正的页面元素，html中并没有对应的结构，但是其用法与行为与真正的页面一样。
• 【 注意】设置伪元素 centent：" " 属性是必须要有的，内容可以为空，默认设置为行内元素。
• 用法：
  ：before
  格式：

        选择器::before{
            content: "题西林壁 苏轼：";
            display: block;
        }

：after
格式：

.p1::after{
            content: ",远近高低各不同";
          }       

7、使用伪元素清除浮动（推荐使用）