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

水深无声 2021-11-09 23:36 378阅读 0赞

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

table——属性：cellspacing、cellpadding、border、align  
合并单元格：rowspan——跨行合并的个数、colspan——跨列合并的个数

清除浮动的三种办法 策略是闭合浮动 防止高度塌陷  
1、额外标签法：在浮动末尾加一个空标签（块级元素），clear: both  
2、给父级元素加overflow: hidden  
3、after伪元素法：（升级版额外标签法）  
添加以下程序，然后在父级元素中添加类名clearfix

.clearfix:after {
            content: "";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }
        .clearfix {
            /* IE6、7 专有 */
            *zoom: 1;
        }
     （双伪元素清除）
        .clearfix:before,
        .clearfix:after {
            content: "";
            display: table;
        }
        .clearfix:after {
            clear: both;
        }
        .clearfix {
            *zoom: 1;
        }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDM1NjM3Mg_size_16_color_FFFFFF_t_70_pic_center]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDM1NjM3Mg_size_16_color_FFFFFF_t_70_pic_center]: /images/20211109/e09cba8175ed47c1916e1478cb18b3d1.png

发表评论取消回复

表情：

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

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

相关阅读

相关 CSS_浮动造成的高度塌陷&BFC&clear&clearfix

参考[前端客栈][Link 1] 一、BFC(Block Formatting Context) 块级格式化环境 BFC(Block Formatting Contex

左手的ㄟ右手/ 2023年10月06日 16:58/ 0 赞/ 85 阅读

相关 css清除浮动

<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <me

刺骨的言语ヽ痛彻心扉/ 2023年05月22日 04:53/ 0 赞/ 229 阅读

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

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

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

相关 CSS 清除浮动

今天这篇文章给大家介绍3种CSS清除浮动的方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。 ![在这里插入图片描述][watermark_type_Zm

男娘i/ 2022年11月22日 05:28/ 0 赞/ 307 阅读

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

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

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

相关浮动布局float带来的高度塌陷——清除浮动 clearfix

很多人都已经习惯称之为清除浮动，以前我也一直这么叫着，但是确切地来说是不准确的。我们应该用严谨的态度来对待代码，也能更好地帮助我们理解开头的三个问题。 1）清除浮动

今天药忘吃喽~/ 2022年05月22日 09:52/ 0 赞/ 315 阅读

相关 margin_top塌陷和清除浮动

margin\_top塌陷问题产生:一个元素中含有一个子元素,给子元素添加margin-top时,会发现将设置的值添加给父元素,导致子元素设置margin-top失效

小鱼儿/ 2022年03月02日 17:36/ 0 赞/ 304 阅读

相关 CSS清除浮动

一般在项目开发中，使用浮动的次数是非常多的，浮动好但是也会带来一定的坏处。如 <!DOCTYPE html> <html> <head>

喜欢ヅ旅行/ 2022年01月21日 23:29/ 0 赞/ 395 阅读

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

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

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

相关 CSS清除浮动

.clearfix::before, .clearfix::after \{ content : ""; display : table; cl

矫情吗；*/ 2021年09月08日 15:32/ 0 赞/ 531 阅读