html和css中浮动清除之解决高度塌陷

我们知道网页的布局有两大利器，“浮动”和“定位”。而浮动和定位都不离开div，所以可以清楚理解应用div盒子模型对网页制作来说及其及其重要。

盒子模型：

浮动：浮动对应这网页三大排版中的浮动排版（其他两个是标准排版、定位排版）（css3中还增加了一些新的排版模型，例如：flex排版）。

设置基本语法

float:none;（默认值，元素不浮动，按照标准流排列元素）
float：left;（元素浮动在父级元素的左边）
float：right;（元素浮动在父级元素的右边）
float：inherit;（元素继承父级元素的float属性）

当float的属性值等于left或是right时，将会引起元素浮动，元素将被视为块级元素。而盒子一旦设置为浮动，将脱离文档流，此时文档流中的块级元素表现的就像浮动元素不存在一样，所以处理不当的话就会出现高度塌陷的问题。

高度塌陷：浮动元素脱离文档流，浮动后的元素无法撑开父元素。

解决方案：
1.设置父元素的高度解决父元素高度塌陷问题

<style>
.father{
width:330px;
height:200px;//设置父元素高度解决高度塌陷，如果不设置高度，子元素将无法撑开父元素
}
.son1{
float:left;
width:150px;
heigth:200px;
backgroundr：#111；
}
.son2{
float:right;
width:150px;
heigth:200px;
background:#666;
}
</style>

但是这种方法只能解决一些子元素高度固定情况，不推荐使用。

2.清除子元素浮动解决父元素高度塌陷
基本语法：
clear：left；//在元素左侧不允许有浮动元素
clear：right；//在元素右侧不允许有浮动元素
clear：both；//在元素左右两侧均不允许有浮动元素

<style>
div{
padding:20px;
margin:20px;
background:#444;
border:1px solid red;
}
.div1,
.div2{
float:left;
}
.div3{
float:right;
}
p{
clear:both;
width:300px;
background:#456789;
border:1px solid green;
}
</style>
<div class="div1">div1</div>
<div class="div2">div2</div>
<div class="div3">div3</div>
<p>在浮动排版中，任何显示在浮动元素下方的HTML元素都会在网页中上移。</p>

3.使用空div清除浮动解决父级元素高度塌陷的问题（在空div里面使用clear：both；）

4使用伪元素清除浮动解决高度塌陷

<style>
.father{
width:300px;//父级元素没有设置高度
border:1px solid red;
}
.father:after{
content:"";//为伪元素添加空的内容
display:block;//将伪元素转化为块级元素
clear:both;//清除两侧的浮动
}
.son2{
float:left;
width:120px;
heigth:100px
background:#ff0；
}
.son2{
float:right;
width:120px;
height:100px;
background:#aaa;
}
</style>
<div class = "father">
<div class = "son1"> float:left</div>
<div class = "son2"> float:right</div>

5.触发BFC解决高度塌陷问题
（1）设置inline-block：对父元素设置display：inline-block；样式，其将会转化为行内块元素，从而触发BFC，使得行内块元素包裹住浮动元素，从而解决父元素高度塌陷问题。
（2）设置父元素浮动：当父元素也浮动时，就会触发父元素的BFC机制，从而也会包裹住浮动元素。（需要考虑设置父元素浮动后带来的影响）

6使用overflow解决父元素高度塌陷的问题

<style>
.father{
width:330px;
overflow:hidden;
border:1px solid red;
}
.son1{
float:left;
width:150px;
height:100px;
background:#aaa;
}
.son2{
float:right；
width:150px;
height:100px;
background:#ccc;
}
</style>
<div class = "father>
	<div class = "son1> float :left</div>
	<div class = "son2> float:right</div>
</div>

以上是关于解决父元素高度塌陷的一些方法。
关于定位的相关内容，我们下次再见！
希望大家多多关注，多多指正！！！