8. 清除浮动的方法

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

    .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 不推荐

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

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

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

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

清除浮动3(外墙法)

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

清除浮动4(内墙法)

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

内墙法和外墙法区别

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

伪元素选择器

格式:

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

伪元素选择器必须设置content 属性否则无效
它的添加内容默认是行内元素

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

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

清除浮动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时父元素也会顶下来

最后编辑于：2017.11.25 19:13:55