CSS浮动与清除详解-优快云博客

本文链接：https://blog.youkuaiyun.com/sinat_31057219/article/details/79230975

参考：
CSS浮动(float,clear)通俗讲解
 CSS 浮动
 overflow:hidden清除浮动原理解析及清除浮动常用方法总结
 css清除浮动float的七种常用方法总结和兼容性处理

BFC概念：

定义：BFC（Block Formatting Context）全称是块级格式化上下文，用于对块级元素排版，默认情况下只有根元素（body）一个块级上下文，但是如果一个块级元素设置了float:left,overflow:hidden或position:absolute样式，就会为这个块级元素生产一个独立的块级上下文，使这个块级元素内部的排版完全独立。

作用：独立的块级上下文可以包裹浮动流，全部浮动子元素也不会引起容器高度塌陷，就是说包含块会把浮动元素的高度也计算在内，所以就不用清除浮动来撑起包含块的高度。

CSS float 属性

浮动属性的设计初衷，只是为了实现文本环绕效果！
浮动元素的特征：
1.浮动元素脱离文档流。
2.浮动元素周围的外边距不会合并。
3.浮动元素具有包裹性。
4.浮动元素具有破坏性。

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。
一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

浮动元素之前的元素将不会受到影响。
浮动元素之后的元素将围绕它。

CSS clear 属性

指定左侧或右侧不允许浮动的元素：
对于CSS的清除浮动(clear)，一定要牢记：这个规则只能影响使用清除的元素本身，不能影响其他元素。

包含块：

浮动元素的包含块就是离浮动元素最近的块级祖先元素

css清除浮动float的三种方法

示例：

不加float：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        .box {
            border: 1px solid black;
            margin: 50px auto;
            padding: 50px;
            color: #fff;
        }

        .d1 {
            background: purple;
            width: 100px;
            height: 100px;
        }

        .d2 {
            background: #9c3;
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="d1">1</div>
    <div class="d2">2</div>
</div>
</body>
</html>

这里写图片描述

使用浮动造成的BUG：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        .box {
            border: 1px solid black;
            margin: 50px auto;
            padding: 50px;
            color: #fff;
        }

        .d1 {
            float: left;
            background: purple;
            width: 100px;
            height: 100px;
        }

        .d2 {
            float: left;    
            background: #9c3;
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="d1">1</div>
    <div class="d2">2</div>
</div>
</body>
</html>

这里写图片描述

浮动产生Bug原因：
当一个内层元素是浮动的时候，如果没有关闭浮动，其父元素也就不会再包含这个浮动的内层元素，因为此时浮动元素已经脱离了文档流。（此处还剩下padding100px）

清除浮动的解决方法：

一、:after的3行代码

原理：利用:after和:before在元素内插入两个元素块（其实就是在节点本身构造出两个存在于Render Tree的节点），从而达到清除浮动的效果。


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        .box {
            border: 1px solid black;
            margin: 50px auto;
            padding: 50px;
            color: #fff;
        }

        .box:after {
            clear: both;
            content: '';
            display: block;
        }

        .d1 {
            float: left;
            background: purple;
            width: 100px;
            height: 100px;
        }

        .d2 {
            float: left;
            background: #9c3;
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="d1">1</div>
    <div class="d2">2</div>
</div>
</body>
</html>

效果图：

这里写图片描述

改进版（强烈推荐使用）：


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        .box {
            border: 1px solid black;
            margin: 50px auto;
            padding: 50px;
            color: #fff;
        }

        .clearfix:after {
            content: ".";
            display: block;
            height: 0;
            visibility: hidden;
            clear: both;
        }

        .clearfix {
            *zoom: 1;
        }

        .d1 {
            float: left;
            background: purple;
            width: 100px;
            height: 100px;
        }

        .d2 {
            float: left;
            background: #9c3;
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
<div class="box clearfix">
    <div class="d1">1</div>
    <div class="d2">2</div>
</div>
</body>
</html>

二、添加新的节点，使用clear:both方法

（跟:after大同小异，实现上略有区别，推荐）


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        .box {
            border: 1px solid black;
            margin: 50px auto;
            padding: 50px;
            color: #fff;
        }

        .clc{
            clear: both;
        }

        .d1 {
            float: left;
            background: purple;
            width: 100px;
            height: 100px;
        }

        .d2 {
            float: left;
            background: #9c3;
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="d1">1</div>
    <div class="d2">2</div>
    <div class="clc"></div>
</div>
</body>
</html>

三、在父节点上设置一个新类名，然后在类名css中设置overflow:auto或overflow: hidden;

可以使用 hidden和auto来清除浮动，但绝不可以使用 visible 清除浮动

overflow:auto示例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        .box {
            border: 1px solid black;
            margin: 50px auto;
            padding: 50px;
            color: #fff;
        }

        .over-flow {
            overflow: auto;
        }

        .d1 {
            float: left;
            background: purple;
            width: 100px;
            height: 100px;
        }

        .d2 {
            float: left;
            background: #9c3;
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
<div class="box over-flow">
    <div class="d1">1</div>
    <div class="d2">2</div>
</div>
</body>
</html>

overflow: hidden;示例：


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        .box {
            border: 1px solid black;
            margin: 50px auto;
            padding: 50px;
            color: #fff;
        }

        .overflow {
            overflow: hidden;
            zoom: 1;
        }

        .d1 {
            float: left;
            background: purple;
            width: 100px;
            height: 100px;
        }

        .d2 {
            float: left;
            background: #9c3;
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
<div class="box overflow">
    <div class="d1">1</div>
    <div class="d2">2</div>
</div>
</body>
</html>

其他清除浮动的方式：

1、父元素：设置display: table

        .box {
            border: 1px solid black;
            margin: 50px auto;
            padding: 50px;
            color: #fff;
            display: table
        }

2、父元素：设置float

        .box {
            border: 1px solid black;
            margin: 50px auto;
            padding: 50px;
            color: #fff;
            float: left;
        }