使用clear,after完美解决高度塌陷

淩亂°似流年 2022-08-29 05:59 145阅读 0赞

# clear：清除浮动对下一个元素的布局影响 #

上面开启BFC的第一种方法可能会对下一个元素的布局产生影响，针对这种影响，

我们可以设置下一个元素的clear属性，可选值：

left: 清除向左浮动元素对它的影响

right：清除向右浮动元素对它的影响

both：清楚两个中最大影响

# ::after伪元素，配合content,在一个元素后面加入一个行内伪元素 #

.out{
                background-color: #bfa;
                border: 10px red solid;
               
            }
            .out::after{
                content: "";
                display: block;
                clear: both;
            }
            .inner{
                width: 100px;
                height: 100px;
                background-color: burlywood;
                float: left;
            }

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1Nzk3Nzgz_size_16_color_FFFFFF_t_70][]

# 拓展： #

# .clearfix同时解决高度塌陷和重叠外边距： #

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

#  #

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1Nzk3Nzgz_size_16_color_FFFFFF_t_70]: /images/20220829/71a20d0c07e74f72904504b0a7e5f21e.png

发表评论取消回复

表情：

评论列表（有 0 条评论，145人围观）

还没有评论，来说两句吧...

相关阅读

相关 HTML高度塌陷

描述父div靠子div撑开，子div全部设置浮动，父div因没有高度而出现塌陷的情况解决 1. 父div设置overflow: hidden 2. cl...

傷城~/ 2024年04月18日 19:56/ 0 赞/ 69 阅读

相关高度自适应和高度塌陷

高度自适应的情况： 1. 高度不去设置，或者高度设置auto 内容撑开父元素的高度。 2. 内容撑开父元素的高度 -> 最小高度的设置 min-height 3. 浮动

灰太狼/ 2023年07月20日 08:22/ 0 赞/ 32 阅读

相关高度塌陷问题解决方法

文档流中，父元素默认被子元素撑开。但当子元素设置为浮动（float）后，子元素会完全脱离文档流，会导致子元素无法撑起父元素高度。父元素高度塌陷，解决办法如下：（1）直接写

痛定思痛。/ 2023年02月14日 07:58/ 0 赞/ 13 阅读

相关 css 高度塌陷_CSS中的浮动、高度塌陷以及清除浮动

一、CSS浮动浮动(float)的框可以左右移动，直至它的外边缘碰到包含框或另一个浮动框的外边缘。浮动框不属于文档中的普通流，当一个元素浮动之后，不会影响到块级元素的布局而

迈不过友情╰/ 2023年01月01日 01:41/ 0 赞/ 233 阅读

相关 HTML 解决父DIV高度塌陷问题

给父元素增加overflow样式, > overflow:auto; 或者 > > overflow:hidden ; 或者

向右看齐/ 2022年09月08日 03:57/ 0 赞/ 182 阅读

相关使用clear,after完美解决高度塌陷

clear：清除浮动对下一个元素的布局影响上面开启BFC的第一种方法可能会对下一个元素的布局产生影响，针对这种影响，我们可以设置下一个元素的clear属性，可选值：

淩亂°似流年/ 2022年08月29日 05:59/ 0 赞/ 146 阅读

相关浮动高度塌陷的BFC解决办法

什么是高度塌陷？当需求包含父元素高度随子元素变化而变化，即要求浮动的子元素始终得被父元素所包围，但是由于子元素浮动脱离文档流，会出现父元素高度丢失的情况，并且还会影响下

╰半夏微凉°/ 2022年08月29日 05:57/ 0 赞/ 209 阅读

相关解决网页元素的容器塌陷问题（div高度变为0）

当我们对div或者其他容器内部的标签使用float属性后，会出现此div下面的其他网页元素跑到此div的顶栏位置，这是由于使用了float使其父级容器出现了容器塌陷（检查元

布满荆棘的人生/ 2022年05月30日 07:36/ 0 赞/ 414 阅读

相关高度塌陷问题

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-

分手后的思念是犯贱/ 2021年11月17日 17:44/ 0 赞/ 295 阅读

相关 CSS-清除浮动（高度塌陷）

CSS三大特性：层叠性、继承性、优先级层叠性：样式冲突，就近原则，如不冲突，不会层叠复合选择器会有权重叠加的问题 table——属性：cellspacing、ce

水深无声/ 2021年11月09日 23:36/ 0 赞/ 335 阅读