第11章掌握CSS——浮动布局浮动布局包括浮动概念、浮动由来、浮动相关属性、元素浮动带来的影响、如何清除浮动以及浮动布

1 标准流

标准流也叫文档流，指的是标签在页面中默认的排布规则，例如：块元素独占一行，行内元素可以一行显示多个。

标准流

2 浮动概念

浮动框即设置float声明块的元素，会向左或右一直移动，遇到视口边缘将停止移动或者浮动框边缘触及到包含块（即块级元素） 以及另外一个浮动框也将停止移动。

3 浮动由来

浮动最开始的作用是让文字进行环绕，而实际上常被用于网页布局。网页布局的第一原则：多个块级元素纵向排列用标准流，多个块级元素横向排列用浮动。

浮动由来

4 浮动相关属性

浮动相关属性

5 盒子小练习

5.1 练习1：盒子1右浮动

效果如下：

盒子浮动练习1

代码如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>03_浮动的小练习</title>
    <style>
        .outer {
            width: 800px;
            border: 1px solid black;
        }
        .box {
            width: 200px;
            height: 200px;
            background-color: skyblue;
            border: 1px solid black;
            margin: 10px;
        }
        .box1 {
            float: right;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="box box1">1</div>
        <div class="box box2">2</div>
        <div class="box box3">3</div>
    </div>
</body>
</html>

5.2 练习2：盒子1左浮动

效果如下：
代码如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>03_浮动的小练习</title>
    <style>
        .outer {
            width: 800px;
            border: 1px solid black;
        }
        .box {
            width: 200px;
            height: 200px;
            background-color: skyblue;
            border: 1px solid black;
            margin: 10px;
        }
        .box1 {
            float: left;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="box box1">1</div>
        <div class="box box2">2</div>
        <div class="box box3">3</div>
    </div>
</body>
</html>

5.3 练习3：所有盒子都浮动

效果如下：
代码如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>03_浮动的小练习</title>
    <style>
        .outer {
            width: 800px;
            background-color: gray;
            border: 1px solid black;
        }
        .box {
            width: 200px;
            height: 200px;
            background-color: skyblue;
            border: 1px solid black;
            margin: 10px;
            float: left;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="box box1">1</div>
        <div class="box box2">2</div>
        <div class="box box3">3</div>
    </div>
</body>
</html>

5.4 练习4：所有盒子浮动后，盒子3落下来

效果如下:

盒子浮动练习4

代码如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>03_浮动的小练习</title>
    <style>
        .outer {
            width: 500px;
            background-color: gray;
            border: 1px solid black;
        }
        .box {
            width: 200px;
            height: 200px;
            background-color: skyblue;
            border: 1px solid black;
            margin: 10px;
            float: left;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
    </div>
</body>
</html>

5.5 练习5：所有盒子浮动后，盒子3卡住了

效果如下：

盒子浮动练习5

代码如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>03_浮动的小练习</title>
    <style>
        .outer {
            width: 500px;
            background-color: gray;
            border: 1px solid black;
        }
        .box {
            width: 200px;
            height: 200px;
            background-color: skyblue;
            border: 1px solid black;
            margin: 10px;
            float: left;
        }
        .box1 {
            height: 230px;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="box box1">1</div>
        <div class="box box2">2</div>
        <div class="box box3">3</div>
    </div>
</body>
</html>

6 元素浮动后的特点

实际上就3个特性：脱标、一行显示顶端对齐以及行内块元素特性。

浮动特点

❓问题：什么是脱离文档流？ 文档流（标准流） 是指标签按照规定的默认方式排列。盒子2设置了浮动效果后，将漂浮起来，原有位置不再占有（被其它标准流占有），原有的宽高将被内容撑开，不再独占一行，与其它元素共占一行，具体如下图所示：

图盒子2脱离文档效果

7 解决浮动产生的影响

7.1 元素浮动后产生的影响

元素浮动后会产生2种影响：一是父元素没指定高度时，会发生父元素高度塌陷；二是浮动框原位置的后面的未浮动兄弟元素被迫向上移动并被浮动框遮挡。

元素浮动后带来的影响

7.2 解决元素浮动后产生的影响（清除浮动）

主要是解决父元素高度塌陷➕浮动框原位置的后面不浮动兄弟元素被迫移动被浮动框遮挡两种问题。

⚠注意： 布局中的一个原则：设置浮动时，兄弟元素要么全都浮动，要么全都不浮动。

方案一：给父元素指定高度。(解决父元素高度塌陷)
方案二：给父元素也设置浮动，带来其它影响。(解决父元素高度塌陷)
方案三 - overfow法：给父元素设置 overflow:hidden; 。(解决父元素高度塌陷)
方案四 - 额外标签法：在所有浮动元素的最后面，添加一个块级元素，并给该块级元素设置 clear:both;。(解决前面元素浮动对后面不浮动的兄弟元素的影响)
方案五 - 单伪元素法：给浮动元素的父元素，设置伪元素，通过伪元素清除浮动，原理与方案四相同。===>推荐使用(解决前面元素浮动对后面不浮动的兄弟元素的影响)
- 第1步准备 after伪元素
```
  .parent::after {
      content: "";
      display: block;
      clear: both;
  }
```
- 第2步父级使用 clearfix 类
```
<div class="father clearfix"></div>
```

方案六 - 双伪元素法：给浮动元素的父元素，设置after和before伪元素，通过伪元素清除浮动

第1步准备 after 和 before 伪元素


/* before 解决外边距塌陷问题 */
/* 双伪元素法 */
.clearfix::before,
.clearfix::after {
  content: "";
  display: table;
}

/* after 清除浮动 */
.clearfix::after {
  clear: both;
}

第2步父级使用 clearfix 类

<div class="father clearfix"></div>

⚠注意：方案五是对最后元素进行了清除浮动，若最后一个元素前面有其它兄弟元素不浮动，此时该方案将失效，此时采用第四方案。

8 浮动布局案例

第一步：将实际页面抽象成布局图，如下图所示：

浮动布局练习页面布局

第二步：给布局图划分盒子以及给每个盒子标注宽高间距，如下图所示：

浮动布局练习

第三步：编写清除默认样式以及共用样式，如下代码所示：

* {
	margin: 0;
	padding: 0;
}

.leftfix {
	float: left;
}

.rightfix {
	float: right;
}

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

第四步：先搭建每一个盒子的页面结构，再添加样式。 搭建盒子的页面结构顺序，是由上往下，由左往右，由里往外，以搭建页面版式以及页面头部为例。页面版式的高度确定为960px，而高度由内容撑开，为了能够看到页面版式，可以先给页面版式设置高度以及背景色，再浏览器中确定页面版式搭建无误后，消除掉页面版式中的高度以及背景色即可，如下图所示：

页面版式对于页面头部，可知其是由logo、banner1以及banner2区域组成，可先写页面头部大盒子，再写其组成的小盒子内容，页面头部大盒子的高度由内容撑开，宽度继承父元素，如下图所示：

先搭建页面结构再添加样式第五步：重复第四步。

具体代码如下所示：

<!DOCTYPE html>
<html lang="zh-CN">
<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>浮动布局练习</title>
    <style>
        /* 默认样式以及共用样式 */
        * {
            margin: 0;
            padding: 0;
        }
        .leftfix {
            float: left;
        }
        .rightfix {
            float: right;
        }
        .clearfix::after {
            content: "";
            display: block;
            clear: both;
        }
        .container {
            width: 960px;
            margin: 0 auto;
            text-align: center;
        }
        /* 页面头部样式 */
        .logo {
            width: 200px;
        }
        .banner1 {
            width: 540px;
            margin: 0 10px;
        }
        .banner2 {
            width: 200px;
        }
        .logo,.banner1,.banner2 {
            height: 80px;
            background-color: gray;\
            line-height: 80px;
        }
        /* 页面菜单 */
        .menu   {
            height: 30px;
            margin-top: 10px;
            background-color: gray;
            line-height: 30px;
        }

        /* 页面内容 */
        .content {
            margin-top: 10px;
        }
        /* 页面内容-左侧区域-上侧 */
        .item1,.item2 {
            width: 368px;
            height: 198px;
            border: 1px solid black;
            margin-right: 10px;
            line-height: 198px;
        }
        /* 页面内容-左侧区域-下侧 */
        .bottom {
              margin-top: 10px;
        }
        .item3,.item4,.item5,.item6 {
            width: 178px;
            height: 198px;
            border: 1px solid black;
            margin-right: 10px;
            line-height: 198px;
        }
        /* 页面内容-右侧区域 */
        .item8 {
            margin: 10px 0;
        }
        .item7,.item8,.item9 {
            width: 198px;
            height: 128px;
            border: 1px solid black;
        }
        /* 页面脚注 */
        .footer {
            height: 60px;
            background-color: gray;
            line-height: 60px;
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- 页面头部 -->
        <div class="page-header clearfix">
            <div class="logo leftfix" clearfix>logo</div>
            <div class="banner1 leftfix">banner1</div>
            <div class="banner2 leftfix">banner2</div>  
        </div>
        <!-- 页面菜单 -->
        <div class="menu">菜单</div>
        <!-- 页面内容 -->
        <div class="content clearfix">
            <!-- 左侧区域 -->
            <div class="left leftfix">
                <!-- 上侧 -->
                <div class="top clearfix">
                    <div class="item1 leftfix">栏目一</div>
                    <div class="item2 leftfix">栏目二</div>
                </div>
                <!-- 下侧 -->
                <div class="bottom clearfix">
                    <div class="item3 leftfix">栏目三</div>
                    <div class="item4 leftfix">栏目四</div>
                    <div class="item5 leftfix">栏目五</div>
                    <div class="item6 leftfix">栏目六</div>
                </div>
            </div>
            <!-- 右侧区域 -->
            <div class="right rightfix">
                <div class="item7">栏目七</div>
                <div class="item8">栏目八</div>
                <div class="item9">栏目九</div>
            </div>
        </div>
        <!-- 页面脚注 -->
        <div class="footer">脚注</div>
    </div>
</body>
</html>

第11章 掌握CSS——浮动布局