css解决塌陷问题

高度塌陷

高度塌陷的问题

在浮动布局中，父元素的高度默认是被子元素撑开的，当子元素浮动后，其会完全脱离文档流，子元素从文档流中脱离，将无法撑起父元素的高度，导致父元素的高度丢失。父元素高度丢失以后，其下的元素会自动上移，导致页面的混乱。

BFC

BFC（Block Formation Context）：块级格式化环境。
BFC是CSS中一个隐含的属性，可以为一个元素开启BFC，开启BFC后，该元素会变成一个独立的布局区域。

元素开启BFC后的特点：

• 元素不会被浮动元素所覆盖
• 子元素和父元素外边距不会重叠
• 元素可以包含浮动的子元素

通过一些特殊方式开启元素的BFC

1. 设置元素的浮动

区别：

使用父元素设置float后，高度不会丢失，但是宽度会丢失

2. 设置display为inline-block，变为行内块元素

问题：会丢失宽度

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

例如：

overflow：scroll（或auto、hidden）

常用的方式为为overflow：hidden开启BFC（不会丢失宽度和高度）

优势：不会丢失宽度和高度

clear

如果我们不希望某个元素因为其他元素浮动的影响而改变位置，可以通过clear属性来清楚浮动元素对当前元素所产生的影响

原理

设置clear以后，浏览器会自动为元素添加一个上外边距，以使其位置不受其他元素的影响。

clear可选值

• left：清楚左侧浮动元素对当前元素的影响
• right：清楚右侧元素对当前元素的影响
• both：清楚两侧中影响最大的那侧

例如：设置clear与不设置clear的区别

例二：
css代码：

.box1{
    width: 200px;
    height: 200px;
    background-color: aqua;
    float: left;
   
}
.box3{
    width: 200px;
    height: 200px;
    background-color: orange;
    clear: both;
   
}
.box2{
    width: 400px;
    height: 400px;
    background-color: black;
    float: right;
}

html代码：

<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>

效果：

after伪类

利用after伪类，对块元素的最后编写一个空文本，再使用clear来占满整个块元素。
例如：

外边距重叠问题

clearfix

clearfix可以同时解决高度塌陷和外边距重叠问题，遇到这些问题时，直接使用clearfix类即可

clearfix代码：

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

例如：