消除高度塌陷方案探究

高度塌陷的最终方法

编写结构

HTML:

<div class="outer">
    <div class="inner"></div>
    <div class="inner01"></div>
</div>

CSS:

.outer{
    border: 5px solid red;
}
.inner{
    background-color: #bfa;
    width: 200px;
    height: 200px;
} 

1.通过填充 HTML元素解决高度塌陷

通过块级元素

1.说明因子元素设置浮动导致父元素高度塌陷

CSS:

.inner{
    background-color: #bfa;
    width: 200px;
    height: 200px;
    float: left; 
} 

2.设置inner01子元素的内容,使得能撑开父元素

HTML:

<div class="outer">
    <div class="inner"></div>
    <div class="inner01">我是替补子元素</div>
</div>

虽然是可以撑起父元素,但是高度不够高。最初的目的是解决父元素因为某个子元素设置浮动导致的塌陷问题,所以父元素撑开的高度要和设置浮动的元素( 绿色块 )高度一样。

Q: 为什么 inner01 元素是在inner元素下编写的,但是实际布局却不是在 inner 下?假如 inner01 布局在 inner 下,这样就可以达到该有的高度(子元素大小)?

A: 这是因为绿色块 inner 设置浮动float后,影响了原来的布局,使得文字环绕在浮动元素周围。

也就是说如果可以清除浮动元素对其他元素的影响( 文字环绕效果 )的话,布局可以达到理想效果。

3.使用clear属性,清除浮动元素对其他元素的影响

CSS

.inner01{
    clear: both;
}

分析:

这个效果就是当子元素不设置浮动时,正常撑开父元素高度的效果,符合预期。

由于使用 clear 清除了浮动元素( inner )对其他元素( inner01 )的影响( 文字环绕和位置空缺导致上移 ) ，这样,元素设置浮动后的布局就和没有设置浮动的布局一样。这样就完美的解决了子元素设置浮动后导致父元素高度塌陷的问题。

Q: 既然已经删除了inner元素的内容,能否删除inner01的标签代码块?

A: 不能,因为这个效果是因为 inner01 设置了 clear 导致的,虽然可以删除了inner01的内容,但是不能删除这个标签,要不然clear也失效了,就会回到高度塌陷的状态。

4.尝试将inner01元素设置高度来撑开父元素。

CSS:

.inner01{
    background-color: rgb(238, 63, 165);
    height: 200px;
}

发现通过给子元素添加内容和 设置子元素高度 都可以撑开父元素。

但是上述方式是通过添加html代码的形式来解决高度塌陷问题。

2.通过 CSS 样式解决高度塌陷

通过伪元素

1.使用伪类after通过css的方式来添加子元素,使用clear清除影响,撑开父元素高度。

由于上述的方法是通过添加html代码( inner01标签 )来改变页面布局效果的,HTML是用于构建页面结构的,而CSS是用来改变页面效果的,所以这种方式不符合W3c规范理念。

既然主要目的是让父元素下有内容,能否使用css方式添加内容呢.可以使用 ::after伪类。

HTML:

<div class="outer">
    <div class="inner"></div>
</div>

CSS:

.outer{
    border: 5px solid red;
}
.inner{
    background-color: #bfa;
    width: 200px;
    height: 200px;
    float: left;
} 
.outer::after{
    content: '我是填充内容';
    clear: both;
}

Q: 为什么还是没有完全撑开?

A: 这是因为虽然使用after,设置了content属性,也使了clear清除浮动元素影响,但是由于添加的内容本身是行内元素( 而不是像使用HTML方法的inner01是div块元素 ),所以还需要使其变为块元素。

CSS:

.outer{
    border: 5px solid red;
}
.inner{
    background-color: #bfa;
    width: 200px;
    height: 200px;
    float: left;
} 
.outer::after{
    content: '我是填充内容';
    display: block; /**  新增代码 **/
    clear: both;
}

使用 after 属性给 父元素内容的最后位置添加内容( 即在浮动子元素下 ),然后设置 clear 属性清除浮动元素对其他元素的影响,使得页面布局可以恢复到正常文档流布局 ,效果上,父元素高度不会塌陷。

可以删除content中的内容

注意事项和细节;

1. 使用 after伪类设置内容时,after是在 父元素的内容下的最后一个位置 添加内容,所以after要为父元素设置。
2. after伪类的content默认是行内元素,需要改变为块元素才能完成布局填充。

解决父元素高度塌陷问题有很多解决方案,目的是找出副作用最小,使用最方便的方案。

clearfix

参考视频: www.bilibili.com/video/BV1XJ…

在布局的内容上面,主要需要解决问题有两个

1. 父元素高度塌陷问题
2. 垂直外边距重叠问题

目的是希望找到一个方法可以同时解决这两个问题.就是用到了clearfix选择器

clearfix其实是封装了解决常见问题的样式规则，遇到这样的问题，可以直接使用。

clearfix选择器的使用

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

其中

.clearfix::before{
    content: '' ;
    display: table;
}

是解决垂直外边距重叠的问题

而

.clearfix::after{
    content: '';
    clear: both;
}

是解决父元素高度塌陷问题的

合并就是最上面的形式

Q: 为什么使用table而不使用block?

A: table既可以解决高度塌陷又能解决外边距重叠问题。