理解CSS传统布局：标准流、浮动与清除浮动,-优快云博客

一、传统网页布局的三种方式

网页布局的本质：用 CSS 来摆放盒子，把盒子摆放到相应位置。

CSS 提供了三种传统布局方式（简单说就是盒子如何进行排列）。

普通流（标准流）

浮动

定位

这里指的只是传统布局，其实还有一些特殊高级的布局方式

二、标准流

标准流：又称文档流，是浏览器在渲染显示网页内容时默认采用的一套排版规则，规定了应该以何种方式排列元素

常见标准流排版规则：

1.块级元素：从上往下，垂直布局，独占一行

2.行内元素或行内块元素：从左往右，水平布局，空间不够自动折行

三、浮动

为什么需要浮动1

想要把多个块级元素放在一行显示,打破常规布局.

使用行内块元素布局页面有一定的局限性,中间会有空白间隙.

实际开发中盒子之间间隙会有严格的要求。

浮动的语法

float: left;
float: right;

浮动的特点

1.浮动元素会脱标，在标准流中不占位置

2.浮动元素比标准流高出半个级别，可以覆盖标准流中的元素

3.浮动找浮动(同方向浮动)，下一个浮动元素会在上一个浮动元素后面左右浮动

4.浮动元素会受到上面元素边界的影响

5.浮动元素有特殊的显示效果：一行可以显示多个并且可以设置宽高

浮动布局注意事项:

1.浮动一般情况下和标准流的父盒子一起搭配使用.

        先用标准流的父元素排列上下位置, 之后内部子元素采取浮动排列左右位置

2.浮动的时候,当父元素装不下浮动的子元素时,子元素会如何显示?

        浮动时,当父亲装不下浮动的子元素,此时此子元素会换行显示

3.一个元素浮动了，理论上其余的兄弟元素也要浮动.

        一个盒子里面有多个子盒子，如果其中一个盒子浮动了，那么其他兄弟也应该浮动，以防止引起问题

        浮动的盒子只会影响浮动盒子后面的标准流,不会影响前面的标准流.

（一浮全浮子浮父不浮兄弟一起浮）

浮动的案例

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .header {
            height: 40px;
            background-color: #333;
        }

        .box {
            width: 1226px;
            height: 100px;
            background-color: pink;
            margin: 0 auto;
        }

        .banner {
            width: 1226px;
            height: 460px;
            background-color: red;
            margin: 0 auto;
        }

        .left {
            float: left;
            width: 234px;
            height: 460px;
            background-color: #ffa500;
        }

        .right {
            float: right;
            width: 992px;
            height: 460px;
            background-color: #87ceeb;
        }
    </style>
</head>

<body>
    <header class="header"></header>
    <div class="box"></div>
    <div class="banner">
        <div class="left"></div>
        <div class="right">
        </div>
    </div>
</body>

</html>

运行结果

四、（扩展）清除浮动

刚刚才介绍完浮动这又讲个扩展是清除浮动，你一定很不理解吧，听我慢慢来给你说为什么。

为什么要清除浮动

如果子元素浮动了，假设父元素不给高度,父元素的高度为0;此时子元素不能撑开标准流的块级父元素,

原因:子元素浮动后脱标 → 不占位置

目的:需要父元素有高度,从而不影响其它网页的布局

清除浮动的方法

给父元素设置高度。

额外标签法

单伪元素清除法

单伪元素

.clearfix::after {

content: '';

display: block;

clear: both;

补充代码

height: 0;

隐藏

visibility: hidden;

}

双伪元素清除法

双伪元素

.clearfix::before,

.clearfix::after {

content: '';

display: table;

}

.clearfix::after {

clear: both;

}

给父元素设置 overflow: hidden;