由float引发的思考

最近工作中不时会遇到float使用问题,由于CSS是一系列属性叠加的结果,float经常会和BFC,外边距折叠等一起出现,故而原本简单的问题却让人老是觉得迷糊,本文记录一下float的使用以备日后查阅.
首先我们来看一下最基本的代码:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #parent {
            padding: 10px;
            border: 3px solid black;
            background-color: green;
        }
        
        #children1 {
            width: 80px;
            height: 80px;
            background-color: red;
            margin-top: 10px;
        }
        
        #children2 {
            width: 80px;
            height: 80px;
            background-color: blue;
        }
    </style>
</head>

<body>
    <div id="parent">
        <div id="children1"></div>
        <div id="children2"></div>
    </div>
</body>

</html>

上述代码是一个div内有两个子div,由于div是块级元素,所以children1和children2会上下排列:

首先我们给children2加上一个左浮动样式,即把CSS样式更改如下:

 #parent {
            padding: 10px;
            border: 3px solid black;
            background-color: green;
        }
        
        #children1 {
            width: 80px;
            height: 80px;
            background-color: red;
            margin-top: 10px;
        }
        
        #children2 {
            width: 80px;
            height: 80px;
            background-color: blue;
            float: left;
        }

显示结果如下:

上图中,由于children2(蓝色方块)增加了浮动样式,浮动样式不是正常的页面流,是独立定位的.所以parent块只包含了children1(红色方块),children2就超出了父元素.

上面我们是给children2加上了左浮动,假若我们是给children1加上了左浮动呢?

 #parent {
            padding: 10px;
            border: 3px solid black;
            background-color: green;
        }
        
        #children1 {
            width: 80px;
            height: 80px;
            background-color: red;
            margin-top: 10px;
            float: left;
        }
        
        #children2 {
            width: 80px;
            height: 80px;
            background-color: blue;
        }

显示结果如下:

上图中因为children1(红色方块)设置了浮动样式,且浮动元素z-index级别高于普通元素,所以它会在children2(蓝色方块)上面显示.

通常浮动元素会引起父元素高度塌陷,例如当我们把CSS文件改成下面这样的时候:

 #parent {
            padding: 10px;
            border: 3px solid black;
            background-color: green;
        }
        
        #children1 {
            width: 80px;
            height: 80px;
            background-color: red;
            margin-top: 10px;
            float: left;
        }
        
        #children2 {
            width: 80px;
            height: 80px;
            background-color: blue;
            float: right;
        }

显示结果如下:

为了清楚浮动,我们可以在parent块中增加一个子块,并添加如下样式:

 #children3 {
            width: 80px;
            height: 80px;
            background-color: orange;
            clear: both;
        }
    <div id="parent">
        <div id="children1"></div>
        <div id="children2"></div>
        <div id="children3"></div>
    </div>

此时显示结果如下:

这样一来就可以清楚浮动了,原理是父容器现在必须考虑非浮动子元素的位置，而后者肯定出现在浮动元素下方，所以显示出来，父容器就把所有子元素都包括进去了。需要注意的是,网上说的clearfix清楚浮动原理和这个一样.
当然清楚浮动还有另外一种方式,原理是触发浮动元素的父元素形成块级格式化上下文,亦即BFC.

由float引发的思考

Zuckjet

引用和评论

在线富文本编辑器初探

CSS团队协作规范

前端开发工具

CSS 现在终于支持高度 auto 过渡动画了

纯CSS电梯导航！借助滚动驱动动画来实现内容和导航联动

CSS 实现带tooltip的slider

CSS炫酷光晕按钮特效