清除浮动

BUG引领者
119 阅读1分钟

解决父元素高度坍塌问题，或者也叫浮动溢出问题(父子级标签子级浮动，父级没有高度，后面标准流的盒子会受到影响) 清除浮动的方式有哪些

  • 父元素一起浮动，不好
  • 父元素高度固定，如果容器高度本身固定，给容器设置高度是最好用最常用的
  • 额外标签法，子元素最后新加一个元素,然后设置clear:both，父级双伪元素，但是添加许多无意义的标签，结构化较差。
  • 父级添加overflow属性方法，触发浮动元素父元素的 BFC (Block Formatting Contexts, 块级格式化上下文)，使到该父元素可以包含浮动元素
  • 使用after伪元素清除浮动，子元素最后一个元素设置伪元素，由于IE6-7不支持:after，兼容性问题，推荐
  • 使用before和after双伪元素清除浮动，由于IE6-7不支持:after，兼容性问题，
额外标签法
<style>
  div{
    width: 300px;
    padding: 10px;
    background-color: aquamarine;
  }
  div span {
    display: inline-block;
    width: 25%;
    float: left;
  }
  a{
    text-decoration: none;
  }
  div p {
    color: blue;
    background-color: chartreuse;
    text-align: center;
    clear: both;
  }
  </style>
</head>
<body>
  <div>
    <h2 class="titl1">go shopping</h2>
    <span><a href="#">推荐</a></span>
    <span><a href="#">数码</a></span>
    <span><a href="#">清仓</a></span>
    <span><a href="#">母婴</a></span>
    <span><a href="#">男装</a></span>
    <span><a href="#">女装</a></span>
    <span><a href="#">食品</a></span>
    <span><a href="#">医药</a></span>
    <span><a href="#">美妆</a></span>
    <span><a href="#">水果</a></span>
    <span><a href="#">饰品</a></span>
    <span><a href="#">汽车</a></span>
    <p>智能家居</p>
  </div>
</body>


BFC方法
`<style>
  div{
    width: 300px;
    padding: 10px;
    background-color: aquamarine;
    overflow: hidden;
    // 父级添加overflow属性方法  overflow: auto/hidden
  }
  div span {
    display: inline-block;
    width: 25%;
    float: left;
  }
  a{
    text-decoration: none;
  }

  </style>
</head>
<body>
  <div>
    <h2 class="titl1">go shopping</h2>
    <span><a href="#">推荐</a></span>
    <span><a href="#">数码</a></span>
    <span><a href="#">清仓</a></span>
    <span><a href="#">母婴</a></span>
    <span><a href="#">男装</a></span>
    <span><a href="#">女装</a></span>
    <span><a href="#">食品</a></span>
    <span><a href="#">医药</a></span>
    <span><a href="#">美妆</a></span>
    <span><a href="#">水果</a></span>
    <span><a href="#">饰品</a></span>
    <span><a href="#">汽车</a></span>
  </div>
</body>`

父元素一起浮动
  div{
    width: 300px;
    padding: 10px;
    background-color: aquamarine;
    float: left;
  }
  
  单伪元素清除浮动
    .cleanfix::after {
    content: '';
    display: block;
    clear:both;
        //由于IE6-7不支持 兼容性
    height:0;
    visibility:hidden;
  }

<div class="cleanfix"> </div>

双伪元素清楚浮动
  .cleanfix::before,
  .cleanfix::after {
    content: '';
    display: table;
  }
  .cleanfix::after {
    clear: both;
  }
  .cleanfix::before  解决外边距塌陷问题，外边距塌陷（父子标签都是块级  子级加margin会影响父级
    得位置）
avatar
文章
阅读
粉丝