【第二部分 | CSS】5：网页布局之浮动

喜欢ヅ旅行 2023-09-26 10:02 91阅读 0赞

**目录**

| 浮动

浮动 · 简介

浮动 · 语法和作用

浮动 · 三大特性简介

特性一 ： 脱标

特性二 ： 浮动的元素在一行内顶部对齐显示

特性三 ： 浮动元素具有行内块元素特性

| 浮动的应用

浮动 · 使用准则

小练习：使用浮动进行布局

| 常见网页布局

基本思路

布局一：全部标准流盒子

布局二：在某个标准流盒子中添加浮动

布局三：中间体使用水平居中窄一点的盒子

| 清除浮动

浮动 · 使用时的注意点

清除浮动 · 导论（重点）

清除浮动 · 本质

清除浮动 · 基本语法

清除浮动 · 基本语法 · 额外标签法

清除浮动 · 基本语法 · 父级盒子添加overflow

清除浮动 · 基本语法 · :after伪元素法（常用）

清除浮动 · 基本语法 · 双伪元素清除浮动（常用）

总结

--------------------

### **| 浮动** ###

#### **浮动 · 简介** ####

之前的网页都是默认布局，这种默认的布局方式称为「标准流」

在网页中，我们通过「标准流 、 浮动 、 定位」 三种方式布局网页，在本章我们介绍 「浮动」 这一布局方式

标准流中，所有的div默认占一行。浮动，可以让多个div在一行上 「按照指定像素间隔」 展示

标准流中，div无法进行左右的分别对齐。浮动，可以让2个div分别在左右展示

## ![1cec84389822497987454449a123b9dd.png][] ##

####    **浮动 · 语法和作用** ####

**语法**

行元素、块元素、行内块元素 都可以添加浮动

![b3fd6c11f4704bcdbb069aadce7c136d.png][]

![3a1adbd957b24b239ca7f1e607623a0e.png][]

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            .basic {
                width: 200px;
                height: 200px;
                float: left;
                background-color: blue;
            }
    
            .basic2 {
                width: 200px;
                height: 200px;
                float: left;
                background-color: pink;
            }
    
        </style>
    </head>
    <body>
        <div class="basic"></div>
        <div class="basic2"></div>
    </body>
    </html>

--------------------

#### 浮动 · 三大特性简介 ####

**基本特性**

1.  浮动元素会脱离标准流 (脱标)
2.  浮动的元素会一行内显示并且元素顶部对齐
3.  浮动的元素会具有行内块元素的特性

--------------------

#### **特性一 ： 脱标** ####

1.  脱离标准普通流的控制（浮） 移动到指定位置（动）, （俗称脱标）
2.  浮动的盒子不再保留原先的位置（即，原先这个盒子的位置，浮动之后把位置让给了别的盒子）

![53d3ef154bf2475eb3c4009ca8acab0a.png][]

![0174cea7fc0e4194826a48325bc19f2d.png][]

.class1 {
                width: 300px;
                height: 300px;
                background-color: pink;
                float: left;
            }
            .class2 {
                width: 300px;
                height: 400px;
                background-color: blue;
            }

--------------------

#### **特性二 ： 浮动的元素在一行内顶部对齐显示** ####

*  若三个盒子都浮动，则这三个盒子自动 在一行内显示、且在 **顶端** 对齐
 *  浮动的元素是互相贴靠在一起的（不会有缝隙）
 *  若父级宽度装不下这些浮动的盒子， 多出的盒子会另起一行对齐

![daf4bef74277416db65b73dff86a28b3.png][]

--------------------

#### **特性三 ： 浮动元素具有行内块元素特性** ####

任何元素都可以浮动。不管原先是什么模式的元素，添加浮动之后具有行内块元素相似的特性。

因此，若添加了浮动，就不需要再声明 display: inline-block 了

![725d1320bcc743cc8b689b006aacde5e.png][]

<head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            /* * {
                margin: 0;
                padding: 0;
            } */
            
            .block {
                width: 300px;
                height: 300px;
                float: left;
                background-color: pink;
            }
    
            .span {
                margin: 0;  /* p有默认的margin,需要清空，从而实现顶部对齐 */
                width: 300px;
                height: 300px;
                float: left;
                background-color: blue;
            }
    
            .inline-block {
                width: 300px;
                height: 300px;
                float: left;
                background-color: pink;
            }
        </style>
    </head>
    <body>
        <div class="block">块级元素</div>
        <p class="span">行级元素</p>
        <input type="text" value="行内块元素" class="inline-block"/>
    </body>

### | 浮动的应用 ###

#### 浮动 · 使用准则 ####

平常的网页中：网页的元素并不都是全部居左或者居右靠齐的，而是被一个标准流父盒子约束着

![29f1231ca49c4c219195374fb7fc3f78.png][]

#### 小练习：使用浮动进行布局 ####

![f6bddd680e1b4080b59e7213dfab60cd.png][]

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
    
            .box {
                height: 410px;
                width: 1030px;
                background-color: pink;
            }
    
            /* 10 + (5+5) + 10 */
    
            .box1 {
                float: left;
                margin: 5px;
                margin-left: 10px;
                width: 300px;
                height: 400px;
                background-color: blue;
            }
    
            .box2 {
                float: left;
                margin: 5px;
                margin-right: 10px;
                width: 700px;
                height: 400px;
                background-color: greenyellow;
                border: transparent;
    
                list-style: none;
            }
    
            .box .box2>div {
                float: left;
                margin: 5px;
                height: 190px;
                width: 340px;
                background-color: pink;   
                border: transparent;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <div class="box1">box1</div>
            <div class="box2">
                <div>A</div>
                <div>A</div>
                <div>A</div>
                <div>A</div>
            </div>
        </div>
    </body>
    </html>

--------------------

### | 常见网页布局 ###

#### 基本思路 ####

*  若宽度和浏览器一样宽，则不需要设置width
 *  一般父盒子使用标准流，然后标准流内使用浮动
 *  一般父盒子需要居中显示，使用 margin: 0 auto;
 *  注意浮动盒子之间的margin值 与 父盒子width、height值之间的相等关系，一定要计算好！

#### 布局一：全部标准流盒子 ####

![2f20c6da0bf6447fb31797a19cb349bf.png][]

#### 布局二：在某个标准流盒子中添加浮动 ####

![d876e1ac83084ef799f04295a5ea7cba.png][]

#### 布局三：中间体使用水平居中窄一点的盒子 ####

![1d68e8c3999346858291b704eb7f7ec8.png][]

![9831872ff8d941358e21f0c476a5fda6.png][]

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
    
            .top {
                /* width和浏览器默认的一致，不用设置 */
                height: 50px;
                margin-top: 20px;
                background-color: pink;
            }
    
            .banner {
                height: 120px;
                width: 1010px;   /*设置快读*/
                margin: 10px auto;  /*居中*/
                background-color: green;
            }
    
            .box {
                height: 300px;
                width: 1010px;
                margin: 10px auto;
                background-color: lightblue;
            }
    
            .box>.box1 {
                float: left;
                margin: 10px;
            }
    
            .box>div {
                float: left;
                background-color: pink;
                margin: 10px;
                margin-left: 0;
                height: 280px;
                width: 240px;
            }
    
            .footer {
                height: 300px;
                background-color: aquamarine;
            }
        </style>
    </head>
    <body>
        <div class="top">top</div>
        <div class="banner">banner</div>
        <div class="box">
            <div class="box1">box1</div>
            <div class="box2">box2</div>
            <div class="box3">box3</div>
            <div class="box4">box4</div>
        </div>
        <div class="footer">footer</div>
    </body>
    </html>

###    **| 清除浮动** ###

#### **浮动 · 使用时的注意点** ####

*  先用标准流的父元素排列上下位置, 之后内部子元素采取浮动排列左右位置
 *  浮动的本质：被浮动的元素，会以**上一个**标准流的下底为顶线对齐，然后**其后**的标准流，会顶替该浮动元素的位置。
 *  我们建议：父盒子内的元素，只要有一个浮动，则其余的兄弟元素也都要浮动

####    **清除浮动 · 导论（重点）** ####

*  **目前的浮动，看似功能很强大，但实际上还有一个问题，导致有些场景下的布局以目前的知识无法完成。**
 *  之前的实例中，所有浮动盒子的父盒子都有高度。但是**有时候父盒子并没有确切的高度**：如新闻、产品列表

![761a6daffa814b16bb8eb208e5b35e15.png][]

*    
    **理想的状态是：让父盒子的高度随子盒子浮动后的高度而变化**
 *  我们来看以下几个例子，体会一下 “没有设置高度的父盒子，遇到浮动的子元素，会产生的变化 —— height变为了0”

1. 父盒子不加高度，子盒子有宽和高，但是不浮动 的情况：**父盒子的高度 = 两个子盒子的高度之和**

![23e909de6db54c12b97c3f749244f626.png][]

2.代码和 \[1\] 中一样，但是给两个子盒子添加浮动 此时**父盒子因为子盒子浮动了，而认为没有子元素，height此时等于0，消失了**

![1ade84689f714d9580ccc6fb2e22ac77.png][]

**这会严重影响 “含有浮动的的子元素 、 且不方便设置高度 的父盒子” 接下来的标准流盒子的排版位置！** （因为此时父盒子被认为是一条线，height=0）

**由于父级盒子很多情况下，不方便给高度，但是子盒子浮动又不占有位置，最后父级盒子高度为 0 时，就会 影响下面的标准流盒子**

因此，**清除浮动** 就是用来解决这个棘手的问题的。

学习了清除浮动，我们可以知道如何设置一个**随 浮动子元素的高度变化 而变化自身的height 的标准流盒子**

--------------------

#### **清除浮动 · 本质** ####

**为什么需要清除浮动？**

*  由于父级盒子很多情况下，不方便给高度，但是子盒子浮动又不占有位置，最后父级盒子高度为 0 时，就会 影响下面的标准流盒子
 *  由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响

**清除浮动的本质：**

*  清除浮动的本质是清除浮动元素造成的影响 而不是把浮动的效果清除
 *  如果父盒子本身有高度，则不需要清除浮动
 *  清除浮动之后，父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了

--------------------

#### **清除浮动 · 基本语法** ####

**清除浮动的语法：**

*  基本语法  **选择器 . \{ clear:** left 或 right 或 **both \}** （一般都使用both）
 *  关键在于，这个属性加在哪个选择器上，是有明确要求的策略的

#### **清除浮动 · 基本语法 · 额外标签法** ####

**策略一：使用额外标签法**

*  语法：在最后一个浮动元素的后面，添加一个额外块级标签，并给予一个选择器，在该额外标签的选择器中定义属性 clear: both
 *  原理：在最后一个浮动元素的后边，添加一个额外的块级元素标签，从而提示父盒子，这个块级元素所在的位置为标准流的底，从而达到 父盒子的高度随浮动而变化 的效果

<head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            .box {
                width: 300px;
                background-color: green;
            }
    
            .box1 {
                float: left;
                width: 200px;
                height: 100px;
                background-color: yellow;
            }
    
            .box2 {
                float: left;
                width: 200px;
                height: 200px;
                background-color: blue;
            }
            .clearname {
                clear: both;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <div class="box1">1</div>
            <div class="box2">2</div>
            <div class="clearname"></div>
        </div>
    </body>

--------------------

#### **清除浮动 · 基本语法 · 父级盒子添加overflow** ####

*  语法：给父级盒子添加 overflow: hidden 或 auto 或 scroll
 *  原理：该原理比较复杂，设计BFC规则及相关知识，以后深入学习。

![fd2bb8a942614d6f903b9f8cf93d4f7b.png][]

#### **清除浮动 · 基本语法 · :after伪元素法（常用）** ####

*  语法：把下列语句复制下来，然后粘贴到style内，然后在父盒子中添加一个名为 clearfix 的class即可清除浮动
 *  这样很方便：需要清除浮动的元素，则只需要在父类添加一个class：clearfix就可以了！很方便

.clearfix:after { 
     content: ""; 
     display: block; 
     height: 0; 
     clear: both; 
     visibility: hidden; 
    } 
    .clearfix { /* IE6、7 专有 */ 
     *zoom: 1;
    }

*  原理：以后会说 伪选择器after的作用，现在先学会用就行了（简单来说就是：after之后，会自动产生一个新的盒子，起作用相当于额外标签法清除浮动）
 *  语法示例（在 浮动导致父盒子高度为0 的代码基础上进行修改，使之清除浮动带来的格式问题）

#### 清除浮动 · 基本语法 · 双伪元素清除浮动（常用） ####

*  基本语法：把下列语句复制下来，然后粘贴到style内，然后在父盒子中添加一个名为 clearfix 的class即可清除浮动

.clearfix:before,.clearfix:after {
     content:"";
     display:table; 
    }
    .clearfix:after {
     clear:both;
    }
    .clearfix {
     *zoom:1;
    }

语法示例：

--------------------

#### 总结 ####

![caea617c9e3140a39ad704a1463e9761.png][]

[1cec84389822497987454449a123b9dd.png]: https://img-blog.csdnimg.cn/1cec84389822497987454449a123b9dd.png
[b3fd6c11f4704bcdbb069aadce7c136d.png]: https://img-blog.csdnimg.cn/b3fd6c11f4704bcdbb069aadce7c136d.png
[3a1adbd957b24b239ca7f1e607623a0e.png]: https://img-blog.csdnimg.cn/3a1adbd957b24b239ca7f1e607623a0e.png
[53d3ef154bf2475eb3c4009ca8acab0a.png]: https://img-blog.csdnimg.cn/53d3ef154bf2475eb3c4009ca8acab0a.png
[0174cea7fc0e4194826a48325bc19f2d.png]: https://img-blog.csdnimg.cn/0174cea7fc0e4194826a48325bc19f2d.png
[daf4bef74277416db65b73dff86a28b3.png]: https://img-blog.csdnimg.cn/daf4bef74277416db65b73dff86a28b3.png
[725d1320bcc743cc8b689b006aacde5e.png]: https://img-blog.csdnimg.cn/725d1320bcc743cc8b689b006aacde5e.png
[29f1231ca49c4c219195374fb7fc3f78.png]: https://img-blog.csdnimg.cn/29f1231ca49c4c219195374fb7fc3f78.png
[f6bddd680e1b4080b59e7213dfab60cd.png]: https://img-blog.csdnimg.cn/f6bddd680e1b4080b59e7213dfab60cd.png
[2f20c6da0bf6447fb31797a19cb349bf.png]: https://img-blog.csdnimg.cn/2f20c6da0bf6447fb31797a19cb349bf.png
[d876e1ac83084ef799f04295a5ea7cba.png]: https://img-blog.csdnimg.cn/d876e1ac83084ef799f04295a5ea7cba.png
[1d68e8c3999346858291b704eb7f7ec8.png]: https://img-blog.csdnimg.cn/1d68e8c3999346858291b704eb7f7ec8.png
[9831872ff8d941358e21f0c476a5fda6.png]: https://img-blog.csdnimg.cn/9831872ff8d941358e21f0c476a5fda6.png
[761a6daffa814b16bb8eb208e5b35e15.png]: https://img-blog.csdnimg.cn/761a6daffa814b16bb8eb208e5b35e15.png
[23e909de6db54c12b97c3f749244f626.png]: https://img-blog.csdnimg.cn/23e909de6db54c12b97c3f749244f626.png
[1ade84689f714d9580ccc6fb2e22ac77.png]: https://img-blog.csdnimg.cn/1ade84689f714d9580ccc6fb2e22ac77.png
[fd2bb8a942614d6f903b9f8cf93d4f7b.png]: https://img-blog.csdnimg.cn/fd2bb8a942614d6f903b9f8cf93d4f7b.png
[caea617c9e3140a39ad704a1463e9761.png]: https://img-blog.csdnimg.cn/caea617c9e3140a39ad704a1463e9761.png