CSS笔记 —— 浮动（父级边框塌陷问题的解决方法）

最新推荐文章于 2023-06-25 22:47:50 发布

一纸春秋

最新推荐文章于 2023-06-25 22:47:50 发布

阅读量1.3k

点赞数 2

分类专栏：前端文章标签： css float 父级边框塌陷 display

本文链接：https://blog.csdn.net/qq_44823756/article/details/121367619

版权

前端专栏收录该内容

9 篇文章 4 订阅

订阅专栏

本篇博客是根据B站up@遇见狂神说的视频以及W3school官网文档整理的笔记，里面会有一些视频的截图、代码和官网的概念，以及我个人的注释笔记，代码例子等。
全篇博客包括代码均为自己手打，结果截图均为自己运行的结果。
以下是视频链接
https://www.bilibili.com/video/BV1YJ411a7dy?spm_id_from=333.999.0.0
W3school官网链接
https://www.w3school.com.cn/css/index.asp

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>display</title>

    <style>
        div{
            width:100px;
            height:100px;
            border:1px solid red;
        }
        span{
            width: 100px;
            height: 100px;
            border: 1px solid red;
        }
    </style>
</head>
<body>

<div>div块级元素</div>
<span>span行内元素</span>
</body>
</html>

结果显示为
在这里插入图片描述
这是代码运行的结果，div块级元素独占一行，高度宽度是设置的100px
而span行内元素的高度和文字的高度一致，和其他的元素共占一行

上面的代码中用到了两个新的标签，分别是 div 和 span
这两个元素本身都没有格式样式，没有效果。作用就是往里面放入成组的元素，比如标题h1标签和段落p标签放在一个div组里面
可以给div和span标签加上class和id属性，这样就可以通过css来给这些标签添加效果

<div>div块级元素</div>
<span>span行内元素</span>

div标签本身是一个块级元素，占用一行的空间，div标签里面的内容会在这个块级元素的区域内显示
span是一个行内元素，里面的内容有多长，就会在浏览器页面占据多宽的空间距离

而display属性的作用，就是可以更改块级元素和行内元素
display属性的属性值有以下四种

block 块级元素
inline 行内元素
inline-bloack 是块级元素，但是可以内联，在同一行。说直接点就是保持块级元素的特性但是写在一行
none

将span标签改为块级元素

div{
    width:100px;
    height:100px;
    border:1px solid red;
}
span{
    width: 100px;
    height: 100px;
    border: 1px solid red;
    display:block;
}

在这里插入图片描述

将div标签改成行内元素

<style>
    div{
        width:100px;
        height:100px;
        border:1px solid red;
        display:inline;
    }
    span{
        width: 100px;
        height: 100px;
        border: 1px solid red;
    }
</style>

在这里插入图片描述

inline-block 让div标签保持着块级元素的特性，但是可以和行内元素在同一行

<style>
    div{
        width:100px;
        height:100px;
        border:1px solid red;
        display:inline-block;
    }
    span{
        width: 100px;
        height: 100px;
        border: 1px solid red;
    }
</style>

在这里插入图片描述

浮动

先给出初开始的元素界面，html和css代码分离，在不同的文件中书写
html端的代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>html文件</title>
    <link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<div id="float">
    <div class="picture1"><img src="images/1.png" alt="" height="218" width="332"></div>
    <div class="picture2"><img src="images/2.jpg" alt="" height="125" width="60"></div>
    <div class="picture3"><img src="images/3.jpg" alt="" height="236" width="348"></div>
    <div class="text1">
        浮动的盒子可以向左浮动，也可以向右浮动，直到它的外边缘碰到包含框或另一个浮动盒子为止
    </div>
</div>
</body>
</html>

与html端代码相对应的css代码

div{
    margin:10px;
    padding:5px;
}
#float{
    border:1px solid red;
}
.picture1{
    border:1px #71e0b3 solid;
    /*display:inline-block;*/
}
.picture2{
    border:1px #4c94ff solid;
    /*display:inline-block;*/
}
.picture3{
    border:1px #5be772 solid;
}
.text1{
    border:1px #d46b25 solid;
    font-size:12px;
    line-height: 23px;
}

在这里插入图片描述
现在利用display：inline-block，让这些元素排列在同一行

div{
    margin:10px;
    padding:5px;
}
#float{
    border:1px solid red;
}
.picture1{
    border:1px #71e0b3 solid;
    display:inline-block;
}
.picture2{
    border:1px #4c94ff solid;
    display:inline-block;
}
.picture3{
    border:1px #5be772 solid;
    display:inline-block;
}
.text1{
    border:1px #d46b25 solid;
    font-size:12px;
    line-height: 23px;
    display:inline-block;
}

在这里插入图片描述
现在利用float，让这些元素浮动起来
float: left 元素向左浮动，float: right 元素向右浮动
其实float和display都是元素排版的一种手段，但是一般都用float
float浮动可以让元素和背景彼此分离开，就像ps的图层一样，元素是浮动在背景上方的

先来看看所有图片元素浮动的效果（其实我是想写只浮动一个元素的效果，但是无奈图片的高度差不多，导致第一个图片浮动起来后，背景框的大小不会改变，就看不出来什么效果，所以就让所有图片都浮起来）

div{
    margin:10px;
    padding:5px;
}
#float{
    border:1px solid red;
}
.picture1{
    border:1px #71e0b3 solid;
    display:inline-block;
    float:left;
}
.picture2{
    border:1px #4c94ff solid;
    display:inline-block;
    float:left;
}
.picture3{
    border:1px #5be772 solid;
    display:inline-block;
    float:left;
}
.text1{
    border:1px #d46b25 solid;
    font-size:12px;
    line-height: 23px;
    display:inline-block;

}

在这里插入图片描述
可以看出来，图片都离开了背景框，也就是那个红色的最大的边框。只有文字还在背景框的里面
此时图片与背景是分离的，是浮在背景上面的

但是这样也有一个问题，那就是如果缩小浏览器的窗口，那么元素会被挤压，重新排列
在这里插入图片描述
还有当所有元素都浮动起来的时候，父级元素里面没有任何内容时

会发现最上面的那个红色方框，用我的话来说就叫背景框，里面没有任何内容，变成窄窄的一个方框
这个问题叫父级边框塌陷问题

我上面说了多次的那个背景框，是这些图片和文本的父级元素

当没有用width和height属性设置父级元素的边框大小时，父级元素的边框大小是由里面的内容撑起来的，也就是最大的那个元素决定了父级元素边框的大小
这里的父级元素是指div，div的边框大小由div里面的各种标签元素决定。但是如果选中div，然后用width和height来设置，那么div的边框大小就是固定的

父级边框塌陷问题

既然发生了这种问题，就要想办法解决这个问题。在解决问题前，需要了解一个概念，标准文档流

标准文档流，这是我们希望达成的网页效果。但是在利用float浮动效果来给元素排版的时候，缩放页面会导致元素重新排列，不再是标准文档流。这类问题就叫做父级边框塌陷问题
在这里插入图片描述
那么为了达成标准文档流的效果，就要解决父级边框塌陷问题，否则元素浮动起来后到处乱飘，整个界面的排版就会乱得一团糟，不符合标准文档流的界面。

clear

clear，用于指定段落的左侧或右侧不允许浮动的元素

clear : left;   左侧不允许有浮动的元素
clear : right;  右侧不允许有浮动的元素
clear : both;   两侧不允许有浮动的元素

div{
    margin:10px;
    padding:5px;
}
#float{
    border:1px solid red;
}
.picture1{
    border:1px #71e0b3 solid;
    display:inline-block;
    float:left;
}
.picture2{
    border:1px #4c94ff solid;
    display:inline-block;
    float:left;
}
.picture3{
    border:1px #5be772 solid;
    display:inline-block;
    float:left;
}

/*
    clear : left;   左侧不允许有浮动的元素
    clear : right;  右侧不允许有浮动的元素
    clear : both;   两侧不允许有浮动的元素
*/
.text1{
    border:1px #d46b25 solid;
    font-size:12px;
    line-height: 23px;
    display:inline-block;
    float:right;
    clear:both;
}

在这里插入图片描述
因为文本元素的两侧都不能有浮动元素，所以自动排列到下一行
通过clear属性，让左侧，右侧，或者两侧不能浮动，从而实现标准文档流的布局效果

此时无论怎么缩放网页，那一行文本会保持在网页的最下面一行，并且以文本为下线，不会有任何元素超过这个下线。因为文本清除了左右浮动的元素，也即是所有元素都不能浮动到这行文本的左右位置，也不能超过这条下线浮动到这行文本的下面。
在这里插入图片描述
但是这样做，这些图片和文本都不在父级元素的范围内，我们希望的一种效果是，虽然这些元素都浮起来了，与父级元素（背景框）分开。但是仍在父级元素的范围之内。

解决父级边框塌陷问题的方法

方法一，扩大父级边框的范围

比较笨的解决办法是，扩大父级边框的范围，自行设置一个比较大的边框，从而营造出一种元素都在这个父级元素里面的样子
将#float里面代码修改为

#float{
    border:1px solid red;
    height: 600px;
    width: 1000px;
}

在这里插入图片描述

方法二，在div里面再套一个div，这个div用来清除左右浮动的元素

先来看看没有清除浮动的样子
html文件

<div id="float">
    <div class="picture1"><img src="images/1.png" alt="" height="218" width="332"></div>
    <div class="picture2"><img src="images/2.jpg" alt="" height="125" width="60"></div>
    <div class="picture3"><img src="images/3.jpg" alt="" height="236" width="348"></div>
    <div class="text1">
        浮动的盒子可以向左浮动，也可以向右浮动，直到它的外边缘碰到包含框或另一个浮动盒子为止
    </div>
    <div class="clear">页面的最低层，清除左右浮动的元素</div>
</div>

css代码，在最下面增加一段即可

.clear{
    margin:0;
    padding:0;
}

在这里插入图片描述
因为新增的div标签元素没有设置浮动，所以还在父级元素的边框内
其他元素都因为设置了浮动，浮在了父级元素的上面，浮在了新增div标签的下面

现在给div标签增加清除浮动的效果

.clear{
    clear:both;
    margin:0;
    padding:0;
}

在这里插入图片描述
之前说明 clear 属性的时候就详细说过这种做法的原理了，这里就是新增一个div标签，取代了原先的一行文本，来作为一条下线。div 标签里面的内容可以为空，什么都不加

现在发现，新增div在父级元素的边框的最下面位置，因为这些标签是从上到下加载的，div标签写在最下面，所以也在页面的最下面
新增div在最下面，它的左右又不允许有浮动的元素，就像是一条底线，拦住了那些想往下浮动的元素

方法三，overflow

先来了解一下overflow
overflow 属性规定当内容溢出元素框时发生的事情。
overflow的属性值有
在这里插入图片描述
下面看一下scroll属性值，即当内容超出元素框的时候，加上一个滚动条
这里把css代码和html代码写在一起了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>滚动条</title>

    <style>
        #content{
            width: 500px;
            height: 350px;
            overflow: scroll;
        }
    </style>
</head>
<body>

<div id="content">
    <img src="images/1.png" alt="" height="418" width="724">
    <p>
        大数据(big data)，或称巨量资料，指的是所涉及的资料量规模巨大到无法透过目前主流软件工具，在合理时间内达到撷取、管理、处理、并整理成为帮助企业经营决策更积极目的的资讯
    </p>
</div>
</body>
</html>

在这里插入图片描述
可以看出来，设置的父级元素的边界是width: 500px; height: 350px; 而图片加文字明显超出了这个范围，于是加上了滚动条
如果用属性值 hidden 的话

<style>
    #content{
        width: 500px;
        height: 350px;
        overflow: hidden;
    }
</style>

会很干脆的裁剪掉溢出范围的部分
在这里插入图片描述
然后我们用overflow来解决父级边框塌陷问题
将方法二里面写的新增div清除两侧浮动的css代码注释掉
然后只需要在#float 里面增加一条overflow属性，属性值为hidden即可

div{
    margin:10px;
    padding:5px;
}
#float{
    border:1px solid red;
    overflow: hidden;
}
.picture1{
    border:1px #71e0b3 solid;
    display:inline-block;
    float:left;
}
.picture2{
    border:1px #4c94ff solid;
    display:inline-block;
    float:left;
}
.picture3{
    border:1px #5be772 solid;
    display:inline-block;
    float:left;
}

.text1{
    border:1px #d46b25 solid;
    font-size:12px;
    line-height: 23px;
    display:inline-block;
    float:right;
    clear:both;
}

在这里插入图片描述

方法四，利用伪元素解决

content 属性与 :before 及 :after 伪元素配合使用，来插入生成内容。
注意伪类和伪元素的区别，伪类是:focus，:hover 以及 < a >标签的:link，visited等。伪元素较常见的有:before，:after等
注释掉之前加入的内容，然后在css加入新的一段代码

#float{
    border:1px solid red;
    /*overflow: hidden;*/
}
#float:after{
    content:' ';
    display: block;
    clear:both;
}

方法四的思路和方法二的思路差不多，不过实现的手段不同
方法二是通过在html的< body >的最下面插入一个div标签，然后在css中选中标签，让其清除左右两侧浮动的元素
方法四不用在html中插入代码，而是在css中通过content和伪元素结合，用css在网页中插入一个新元素，然后让这个元素清除左右两侧浮动的效果
同样的解决了父级边框塌陷问题
在这里插入图片描述
一般都是使用方法四，每次使用浮动效果的时候，如果发现了父级边框塌陷问题，都可以考虑用方法四，在css里面加入这样的一段代码

前三个方法的优点都是简单，然后后面跟着的一句话是相对应的缺点
在这里插入图片描述
display和float的对比
两者都可以让块级元素和行内元素排在同一行或者同一列
但是display的排列方向不可控制，而float浮动的方向可以控制，left，right一类的属性值
但是float还有一个问题就是浮动起来的元素会脱离标准文档流，不在预想的位置上，所以要解决父级边框塌陷问题

一纸春秋

关注

2
点赞
踩
8

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS笔记 —— 浮动（父级边框塌陷问题的解决方法）

目录display将span标签改为块级元素将div标签改成行内元素inline-block 让div标签保持着块级元素的特性，但是可以和行内元素在同一行浮动父级边框塌陷问题clear解决父级边框塌陷问题的方法方法一在div里面再套一个div，这个div用来清除左右浮动的元素方法三方法四，利用伪元素解决display首先来给出一个块级元素，一个行级元素<!DOCTYPE html><html lang="en"><head> <meta chars
复制链接

扫一扫