CSS浮动

网页的常用格式

标准流
行内元素单独一行，块级元素是上下显示的，标准流是最稳定的。
浮动流
脱离标准流，影响标准流的排布。
定位流
完全脱离非标准流，不会影响标准流。
浮动的目的：把多个块级元素放到想要的一行上面。
Float:left right none both
特点：
1 脱离标准流，浮动漂浮在标准流的上面；
2 浮动是左右浮动，块级元素放到想要的一行上面。
为什么要清除浮动？
reason:浮动会影响标准流。
清除浮动的方法
父级div定义高度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>清除浮动</title>
    <style>
        .div{
            width: 200px;
            height: 200px;
            background: aqua;
        }
        .left{
            width:30%;
            height: 100px;
            background: blueviolet;
            float: left;
        }
        .right{
            width:20%;
            height:100px;
            background: blue;
            float: right;
        }

        .div2 {
            width: 300px;
            background: yellow;
        }
            </style>
</head>
<body>
<div class="div">父级
<div class="left">左边</div>
<div class="right">右边</div>
</div>

</body>
</html>

原理：父级div手动定义height,解决了div无法自动获取高度的问题。
缺点：只适合高度固定的布局，要给出精确的高度。

结尾处加上空div标签 clear:both;

<div class="div2">
    父级
    <div class="left">左边</div>
    <div class="right">右边</div>
    <div style="clear: both"></div>
</div>

原理：让父级div自动获取高度

父级div定义伪类：after和zoom

       .divf{
            width: 300px;
            background:red;
            zoom: 1;
        }
        .divf:after{
            display: block;
            visibility: hidden;
            content: "";
            clear: both;
            height:0;
        }

父级div定义overflow:hidden
原理：必须定义width和zoom：1，同时不能定义height,浏览器会自动添加高度；
缺点：不能和position配合使用，因为超出范围的会被隐藏
父级div定义overflow:auto
原理：同上
缺点：内部高度超过父级高度，会出现滚动条。

还有其他方法，不做描述。

CSS浮动

推荐阅读更多精彩内容