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. 清除浮动1 不推荐
  • 给浮动元素的父元素设置高度

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

  1. 清除浮动2(clear属性) 不推荐
  • 给后面的盒子添加clear属性
  • clear属性取值: left / right / both / none(默认)
    • PS: 如果给某一标签设置clear属性, 那么它的margin-top属性就会失效(父子关系中, 子元素设置margin-top父元素也会顶下来)
    • 解决办法给body设置边框
  1. 清除浮动3(外墙法)
  • 在两个盒子之间添加一个块级元素 设置这个盒子属性为clear:both
    • PS: 可以让第二个盒子使用margin-top属性, 但一般不会让第一个盒子使用margin-bottom属性, 通常都是设置墙的高度
  1. 清除浮动4(内墙法)
  • 在第一个盒子的所有子元素的后面添加一个块级元素 设置它的属性clear:both
    • PS: 可以让第二个盒子使用margin-top属性, 也可以让第一个盒子使用margin-buttom属性, 通常都是设置墙的高度
  1. 内墙法和外墙法区别
  • 内墙法可以撑起第一个盒子的高度 开发中不常用隔墙法
  1. 伪元素选择器
  • 格式:

    标签名称::before{属性:值}  //在标签的内容之前添加内容
    标签名称::after{属性:值}  //在标签的内容之后添加内容
    或 p:before  //在p标签之前插入内容
    
  • 伪元素选择器必须设置content 属性 否则无效

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

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

     .clearfix::after{
         /*设置添加的子元素的内容为空*/
         content: '';
         /*设置添加的子元素为块级元素*/
         display: block;
         /*给添加的子元素设置 clear: both;*/
         clear: both;
        /*设置添加的属性不可见 但占用空间.*/
         visibility: hidden;
         /*设置高度为0*/
         height: 0;
      }
     .clearfix{
         /*兼容IE6以下版本*/
         *zoom:1;
     }
    
  2. 清除浮动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时 父元素也会顶下来
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。