通常在水平排版中会设置浮动流, 所以导致浮动元素撑不起父元素的高度, 这是因为浮动元素是脱离标准流的一种排版方式. 若想在垂直排版中用标准流设置高度的话, 就需要清除浮动.

    .father{
        border: 1px solid green;  width: 100px;
    }
    .fl{
        width: 100px; height: 50px; border: 1px solid #000; float: left;
    }
    .fr{
        width: 100px; height: 50px; border: 1px solid #000; float: right;
    }

<div class="father">
    <div class="fl">float:left</div>
    <div class="fr">float:right</div>
</div>

浮动元素脱离了标准流后 撑不起父元素的高度 导致父元素就只剩border的宽度了

1. 清除浮动1 不推荐

• 给浮动元素的父元素设置高度

在企业开发中,尽量不设置高度,让高度自适应

2. 清除浮动2(clear属性) 不推荐

• 给后面的盒子添加clear属性
• clear属性取值: left / right / both / none(默认)
  • PS: 如果给某一标签设置clear属性, 那么它的margin-top属性就会失效(父子关系中, 子元素设置margin-top父元素也会顶下来)
  • 解决办法给body设置边框

3. 清除浮动3(外墙法)

• 在两个盒子之间添加一个块级元素 设置这个盒子属性为clear:both
  • PS: 可以让第二个盒子使用margin-top属性, 但一般不会让第一个盒子使用margin-bottom属性, 通常都是设置墙的高度

4. 清除浮动4(内墙法)

• 在第一个盒子的所有子元素的后面添加一个块级元素 设置它的属性clear:both
  • PS: 可以让第二个盒子使用margin-top属性, 也可以让第一个盒子使用margin-buttom属性, 通常都是设置墙的高度

5. 内墙法和外墙法区别

• 内墙法可以撑起第一个盒子的高度 开发中不常用隔墙法

6. 伪元素选择器

• 格式:

  标签名称::before{属性:值}  //在标签的内容之前添加内容
  标签名称::after{属性:值}  //在标签的内容之后添加内容
  或 p:before  //在p标签之前插入内容
  

• 伪元素选择器必须设置content 属性 否则无效

• 它的添加内容默认是行内元素

7. 清除浮动方式5 伪元素+内墙法(通用性强)

    .clearfix::after{
        /*设置添加的子元素的内容为空*/
        content: '';
        /*设置添加的子元素为块级元素*/
        display: block;
        /*给添加的子元素设置 clear: both;*/
        clear: both;
       /*设置添加的属性不可见 但占用空间.*/
        visibility: hidden;
        /*设置高度为0*/
        height: 0;
     }
    .clearfix{
        /*兼容IE6以下版本*/
        *zoom:1;
    }
   

8. 清除浮动6 overflow: hidden

• 溢出标签的内容修剪
• 清除浮动
  • 关于overflow:hidden 设置后会触发BFC(块级排版上下文) , 计算包含的子元素的高度, 由此清除浮动. 可以这样认为:溢出的内容隐藏的话, 应该先计算其高度, 再隐藏. 如果反过来的话就没意义了.
    
    当给父元素设置overflow: hidden
• 父元素设置overflow: hidden, 解决父子关系中的当子元素设置margin-top之后不会把父元素顶下来的问题(解决图示问题)
  • 或者给父元素设置 border属性

    .father{
        width: 500px;  background-color: #000;
    }
    .son{
        width: 100px; height: 50px; margin-top: 20px; background-color: green;
    }
    <div class="father">
        <div class="son">父子关系的两个盒子</div>
    </div>

父子关系中 当子元素设置margin-top时 父元素也会顶下来