浮动的简介、浮动的其他特点、简单的布局、高度塌陷和BFC、BFC的演示、clear、使用after伪类解决高度塌陷、clearfix——03.float

嘻嘻哈哈二郎神

已于 2023-02-11 16:05:41 修改

阅读量408

点赞数

分类专栏： CSS 文章标签：前端 html css

于 2022-12-19 14:05:32 首次发布

本文链接：https://blog.csdn.net/weixin_70320000/article/details/128365351

版权

CSS 专栏收录该内容

11 篇文章 2 订阅

订阅专栏

七、使用after伪元素解决高度塌陷（最终解决方案）

八、clearfix（同时解决高度塌陷和外边距重叠的问题）

传统网页布局的三种方式

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

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

1. 普通流（标准流/文档流）

所谓标准流：就是标签按照规定好默认方式排列

2. 浮动

浮动布局的两个注意点：

(1). 浮动和标准流的父盒子搭配：先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置。

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

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

浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流。如有三个盒子1，2，3，第一个盒子浮动，第2个盒子还是标准流，第3个盒子也浮动，那么结果是2会在1的下面，但3不会与1邻近，还是在2的下面，因为浮动之后影响其后面的标准流，不影响前面的。

3. 定位

网页布局第一准则：多个块级元素竖向排列找标准流，多个块级元素横向排列找浮动。

浮动元素经常搭配标准流的父元素：为了约束浮动元素位置，网页布局一般采取的策略是：先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置，符合网页布局第一准则。

网页布局第二准则：先设置盒子大小，之后设置盒子的位置。

一、浮动的简介（float 属性）

通过浮动可以使元素向其父元素的左侧或右侧移动

使用 float 属性来设置元素的浮动

可选值：

none	默认值，元素不浮动
left	元素向左浮动
right	元素向右浮动

注意：元素设置浮动后，水平布局的等式便不需要强制成立

元素设置浮动以后，会完全从文档流中脱离，不再占用文档流的位置

所以元素下边的还在文档流中的元素会自动向上移动。

浮动的特点（重难点）：

1. 浮动元素会完全脱离文档流，不再占据文档流中的位置

2. 设置浮动以后，元素会向父元素的左侧或右侧移动

3. 浮动元素默认不会从父元素中移出

4. 浮动元素向左或向右移动时，不会超过它前边的其它浮动元素（水平方向）

5. 如果浮动元素的上边是一个没有浮动的块元素，则浮动元素无法上移

6. 浮动元素不会超过它上边的浮动的兄弟元素，最多最多就是和它一样高（垂直方向）

如浮动的兄弟元素的在结构中依次是box1、box2、box3, 设置的浮动分别为left、right、left

当页面逐渐变窄时，容纳不下三个元素时，首先box3会换到下一行，然后是box2

因为浮动元素不会超过它上边的浮动的兄弟元素，最多和它一样高

简单总结：

浮动目前来将它的主要作用就是让页面中的元素可以水平排列，通过浮动可以制作一些水平方向的布局。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box1{
            width: 400px;
            height: 200px;
            background-color: #bfa; 
            float: left;
        }
        .box2{
            width: 400px;
            height: 200px;
            background-color: orange;   
            float: right;            
        }
        .box3{
            width: 200px;
            height: 200px;
            background-color: yellow;   
            float: left; 
        }
    </style>
</head>
<body>
    <div class="box1"></div>    
    <div class="box2"></div>
    <div class="box3"></div>
</body>
</html>

二、浮动的其他特点

浮动元素不会盖住文字，文字会自动环绕在浮动元素的周围

所以我们可以利用浮动来设置文字环绕图片的效果

元素设置浮动以后，将会从文档流中脱离，从文档流中脱离后，元素的一些特点也会发生变化

脱离文档流的特点：

块元素：

1. 块元素不再独占页面一行

2. 脱离文档流后，块元素的宽度和高度默认都被内容撑开

行内元素：

行内元素脱离文档流后会变成块元素，可以设置宽度高度，特点和块元素一样

脱离文档流后，不再需要区分块和行内元素

注意：以上特点是脱离文档流后元素的特点，不是浮动特有的，浮动会使元素脱离文档流

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box1{
            width: 100px;
            height: 100px;
            background-color: #bfa; 
            float: left;
        }
        .box2{
            background-color: orange;   
            float: left;   
            /* 块元素的高度会被内容撑开，而宽度默认和父元素相同 */         
        }
        .box3{
            background-color: yellow;   
        }
        span{
            background-color: greenyellow;
            width: 200px;
            height: 100px;
            float: left;
        }
    </style>
</head>
<body>
    <div class="box1"></div>    
    <p>In this paper, we study the decision process of assigning elective surgery patients to multiple available surgical blocks in a given
        decision period (e.g., a week). Each block is dedicated to only one
        type of surgical specialty, while there can be multiple blocks of the
        same specialty during a cycle of the surgery schedule. Each patient
        has a surgery type and can be assigned to any of the blocks dedicated to his/her surgery type. Surgery durations are random, and
        after surgery, a patient may need intensive care in the downstream
        intensive care unit (ICU) for an uncertain number of consecutive
        days. 
    </p>
    <div class="box2">hello</div>
    <div class="box3">嘻嘻</div>
    <span>我是一个span元素</span>
</body>
</html>

三、网页的布局

<!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>
        /* 将公共样式提到一起，减少代码量 */
        header,main,footer{
            width: 1000px;
            /* 是元素在页面水平居中 */
            margin: 0 auto;
        }
        header{          
            height: 150px;
            background-color: silver;
        }
        main{
            height: 400px;
            background-color: #bfa;
            margin: 10px auto;
        }
        nav,article,aside{
            height: 100%;
            float: left;
        }
        /* 设置左侧的导航 */
        nav{
            width: 200px;
            background-color: yellow;
        }
        article{
            width: 580px;
            background-color: orange;
            margin: 0 10px;
        }
        aside{
            width: 200px;
            background-color: pink;
        }
        footer{
            height: 150px;
            background-color: tomato;
        }
    </style>
</head>
<body>
    <!-- 创建头部 -->
    <header></header>

    <!-- 创建网页的主体 -->
    <main>
        <!-- 左侧导航 -->
        <nav></nav>
        <!-- 中间的内容 -->
        <article></article>
        <!-- 右边的边栏 -->
        <aside></aside>
    </main>

    <!-- 网页的底部 -->
    <footer></footer>
</body>
</html>

四、高度塌陷和BFC

我们前面浮动元素有一个标准流的父元素，他们有一个共同的特点，都是有高度的，但是所有的父盒子都必须有高度吗？

实际往往希望父元素的高度随着内容变化，不然东西少会空白，东西多会溢出

高度塌陷的问题：

在布局中，父元素的高度默认是被子元素撑开的，

但当子元素浮动后，其会完全脱离文档流，子元素从文档流中脱离，

将会无法撑起父元素的高度，导致父元素的高度丢失

父元素高度丢失以后，其下的元素会自动上移，导致页面的布局混乱

所以高度塌陷是浮动布局中比较常见的一个问题，这个问题我们必须进行处理！

清除浮动本质：

清除浮动的本质是清除浮动元素造成的影响

如果父盒子本身有高度，则不需要清除浮动

清除浮动以后，父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了。

BFC (Block Formatting Context) 块级格式化环境

- BFC 是一个CSS中的一个隐含的属性，可以为一个元素开启BFC

开启BFC后，该元素会变成一个独立的布局区域

- 元素开启BFC后的特点：

1. 开启BFC的元素不会被浮动的元素所覆盖

2. 开启BFC的元素子元素和父元素外边距不会重叠

3. 开启BFC的元素可以包裹浮动的子元素

- 可以通过一些特殊方式开启元素的BFC:

1. 设置元素的浮动（不推荐）

副作用：为父元素使用float开启BFC，此时父元素也脱离文档流，

故宽度也默认被子元素撑开，宽度丢失

同时下边的元素也会因其浮动而上移

2. 将元素设置为行内块元素 display:inline-block（不推荐）

副作用：为父元素设置行内块元素，但行内块元素不适合做外部的布局容器

且设置为行内块后，宽度也会丢失

3. 将元素的overflow 设置为一个非visible的值

常用的方式，为元素设置 overflow: hidden 开启其BFC,以使其可以包含浮动元素

为父元素添加overflow 属性，可以清除浮动

所有开启BFC的方式都有一些副作用

<!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>
        .outer{
            border: 10px red solid;
            /* 为父元素使用float开启BFC，此时outer也脱离文档流，故宽度也默认被子元素撑开，宽度丢失
            同时下边的元素也会因其浮动而上移 */
            /* float: left; */
            /* display: inline-block; */
            overflow: hidden;
        }
        .inner{
            width: 100px;
            height: 100px;
            background-color: #bfa;
            float: left;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="inner"></div>
    </div>
    <div style="width:100px; height:100px; background-color:yellow; "></div>
</body>
</html>

五、BFC的演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box1{
            width: 200PX;
            height: 200PX;
            background-color: #bfa;
            overflow: hidden;
        }
        .box3{
            width: 100px;
            height: 100px;
            background-color: yellow;
            margin-top: 100px;
        }
        .box2{
            width: 200px;
            height: 200px;
            background-color: orange;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box3"></div>
    </div>
    <div class="box2"></div>
</body>
</html>

六、clear（清除浮动）

clear

- 作用：清除浮动元素对当前元素所产生的影响

- 属性值：

left 清除左侧浮动元素对当前元素所产生的影响

right 清除右侧浮动元素对当前元素所产生的影响

both 清除两侧中最大影响的那侧

实际工作中，几乎只用clear:both;

- 原理：

设置清除浮动以后，浏览器会自动为元素添加一个上外边距，

以使其位置不受其他元素的影响

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div{
            font-size: 50px;
        }
        .box1{
            width: 200px;
            height: 200px;
            background-color: #bfa;
            float: left;
        }
        .box2{
            width: 400px;
            height: 400px;
            background-color: red;
            float: right;
        }
        .box3{
            width: 200px;
            height: 200px;
            background-color: orange;
            /* 由于box1的浮动，导致box3位置上移
                也就是box3受到了box1浮动的影响，位置发生了改变
               如果我们不希望某个元素因为其他元素浮动的影响而改变位置，
                 可以通过clear 属性来清除浮动元素对当前元素所产生的影响
             */
             clear:both;
        }
    </style>
</head>
<body>
    <div class="box1">1</div>
    <div class="box2"></div>
    <div class="box3">3</div>
</body>
</html>

七、使用after伪元素解决高度塌陷（最终解决方案）

注意：after伪元素默认为行内元素，不会独占一行，故应将其用display转换为块元素

并添加内容，内容为空

<!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>
        .box1{
            border: 10px red solid;
        }
        /* 解决高度塌陷问题 */
        .box1::after{
            content: '';
            /* after伪元素默认为行内元素，不会独占一行 */
            display: block;
            clear: left;
        }
        .box2{
            width: 100px;
            height: 100px;
            background-color: #bfa;
            float: left;
        }       
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
</body>
</html>

八、clearfix（同时解决高度塌陷和外边距重叠的问题）

解决父元素和子元素的外边距重叠问题

用before伪元素，为其设置内容，若不设则隔不开，但设置内容会占位置，并使子元素向下溢出

可以再为其设置display属性为table ，既可以隔开也不会占位置

clearfix 这个样式可以同时解决高度塌陷和外边距重叠的问题，

当你在遇到这些问题时，直接使用clearfix，为父元素添加clearfix类

clearfix类的样式：

.clearfix::before,
.clearfix::after{
      content: '';
      display: table;
      clear: both;
}

<!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>
        .box1{
            width: 200px;
            height: 200px;
            background-color: #bfa;

        }
        /* 解决外边距重叠
        .box1::before{
            content: '';
            display: table;
        } */
        .box2{
            width: 100px;
            height: 100px;
            background-color:orange;
            margin-top: 100px;
        }   
        /*  clearfix  这个样式可以同时解决高度塌陷和外边距重叠的问题 */
        .clearfix::before,
        .clearfix::after{
            content: '';
            display: table;
            clear: both;
        }    
    </style>
</head>
<body>
    <div class="box1 clearfix">
        <div class="box2"></div>
    </div>
</body>
</html>