CSS 清除浮动、BFC

梁柱

BFC

BFC:块级格式化上下文
BFC是一个独立的布局环境,其中的元素布局是不受外界的影响,并且在一个BFC中,块盒与行盒(行盒由一行中所有的内联元素所组成)都会垂直的沿着其父元素的边框排列。

BFC的布局规则

  • 内部的Box会在垂直方向,一个接一个地放置。
  • Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。
  • 计算BFC的高度时,浮动元素也参与计算。
  • BFC的区域不会与float box重叠。
  • 每个盒子(块盒与行盒)的margin box的左边,与包含块border box的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此。
  • BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此。

如何创建BFC

1、float的值不是none
2、position的值不是static或者relative
3、display的值是inline-blocktable-cellflextable-caption或者inline-flex
4、overflow的值不是visible

BFC的作用

1.利用BFC避免margin重叠。
2.自适应两栏布局
3.清除浮动。

清除浮动

清除浮动主要是为了解决,父元素因为子级元素浮动引起的内部高度为0的问题。

清除浮动的方法

1. 额外标签法

在最后一个浮动标签后,新加一个标签,给其设置clear:both;(不推荐)

优点:通俗易懂,方便
缺点:添加无意义标签,语义化差

<style>
        .div1 {
            background: #00a2d4;
        }
        .left {
            float: left;
            width: 200px;
            height: 200px;
            background: #9889c1;
        }
        .right {
            float: right;
            width: 200px;
            height: 200px;
            background: orangered;
        }
        .clear {
            clear: both;
        }
    </style>
</head>
<body>
<div class="div1">
    <div class="left">Left</div>
    <div class="right">Right</div>
    <div class="clear"></div>
</div>
<div class="div2"></div>
</body>

2.父级添加overflow属性

通过触发BFC方式,实现清除浮动。(不推荐)

优点:代码简洁
缺点:内容增多的时候容易造成不会自动换行导致内容被隐藏掉,无法显示要溢出的元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div1 {
            background: #00a2d4;
            overflow: hidden;
        }
        .left {
            float: left;
            width: 200px;
            height: 200px;
            background: #9889c1;
        }
        .right {
            float: right;
            width: 200px;
            height: 200px;
            background: orangered;
        }
    </style>
</head>
<body>
<div class="div1">
    <div class="left">Left</div>
    <div class="right">Right</div>
</div>
<div class="div2"></div>
</body>
</html>

3.使用after伪元素清除浮动(推荐使用)

优点:符合闭合浮动思想,结构语义化正确。
缺点:ie6-7不支持伪元素:after,使用zoom:1触发hasLayout。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div1 {
            background: #00a2d4;
        }
        .left {
            float: left;
            width: 200px;
            height: 200px;
            background: #9889c1;
        }
        .right {
            float: right;
            width: 200px;
            height: 200px;
            background: orangered;
        }
        .clearfix:after {
            content: ""; /*内容为空*/
            display: block; /*转换为块级元素*/
            height: 0; /*高度为0*/
            clear: both; /*清除浮动*/
            visibility: hidden; /*隐藏盒子*/
        }
        .clearfix {
            *zoom: 1; /*IE6\7的处理方式*/
        }
    </style>
</head>
<body>
<div class="div1 clearfix">
    <div class="left">Left</div>
    <div class="right">Right</div>
</div>
<div class="div2"></div>
</body>
</html>

4.使用before和after双伪元素清除浮动

优点:不仅可以清除浮动,也可以解决高度塌陷的问题(给父盒子添加类名clearfix)
缺点:用zoom:1触发hasLayout.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div1 {
            background: #00a2d4;
        }
        .left {
            float: left;
            width: 200px;
            height: 200px;
            background: #9889c1;
        }
        .right {
            float: right;
            width: 200px;
            height: 200px;
            background: orangered;
        }
        .clearfix:after, .clearfix:before {
            content: "";
            display: table;
        }
        .clearfix:after {
            clear: both;
        }
        .clearfix {
            *zoom: 1;
        }
    </style>
</head>
<body>
<div class="div1 clearfix">
    <div class="left">Left</div>
    <div class="right">Right</div>
</div>
<div class="div2"></div>
</body>
</html>
阅读 3.3k
132 声望
11 粉丝
0 条评论
132 声望
11 粉丝
文章目录
宣传栏