CSS布局中浮动问题怎么解决

tangjin

作者

本文将为大家详细介绍“CSS布局中浮动问题怎么解决”，内容步骤清晰详细，细节处理妥当，而小编每天都会更新不同的知识点，希望这篇“CSS布局中浮动问题怎么解决”能够给你意想不到的收获，请大家跟着小编的思路慢慢深入，具体内容如下，一起去收获新知识吧。

一、起因：

子盒子设置浮动之后效果：

由此可见，蓝色的盒子设置浮动之后，因为脱离了标准文档流，它撑不起父盒子的高度，导致父盒子 高度塌陷 。如果网页中出现了这种问题，会导致我们整个网页的布局紊乱

二、解决方案：

父盒子设置固定高度------------------给父元素添加固定的高度
内墙法 -------------------------------在父元素的后面添加一个空的div添加样式为 clear:both
伪元素清除法-------------------------给父元素类名添加一个类叫 clearfix （推荐）
overflow:hidden---------------------给父元素样式添加 overflow:hidden

（1）父盒子设置固定高度

虽然，给父盒子设置了固定高度能暂时解决我们的问题，但是它的使用不灵活，如果未来子盒子的高度需求发生了改变(网页的多处地方)，那么我们得手动需要更改父盒子的高度。后期不易维护。

应用：网页中盒子固定高度区域，比如固定的导航栏。

缺点：使用不灵活，后期不易维护

（2）内墙法

在浮动元素的后面加一个空的块级元素 (通常是div),并且该元素设置 clear:both； 属性。clear属性，字面意思就是清除，那么both,就是清除浮动元素对我左右两边的影响。

代码如下：

<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8">
<title>浮动元素的破坏性</title>
<styletype="text/css">
.father{
border:1pxsolidred;
}
.child{
width:200px;
height:200px;
float:left;
background-color:green;
}
.clearfix{
clear:both;
}
</style>
</head>
<body>
<divclass="father">
<divclass="child">儿子</div>
<divclass="clearfix"></div>
</div>
</body>
</html>

应用：网页中应用不多，只是为了引导下一个清除浮动的方式。

缺点：结构冗余

（3）伪元素清除法

内墙法是在浮动元素的后面加一个空的块级元素 (通常是div),并且该元素设置 clear:both； 属性。

那么正好在css3的属性用法中整好有个选择器也完全符合这个用法，伪元素选择器。它就像伪类一样，让伪元素添加了选择器，但不是描述特殊的状态，允许为元素的某些部分设置样式。

表示在p标签元素的最后面添加样式，同时这也正好符合内墙法的用法。

代码如下：

<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8">
<title>浮动元素的破坏性</title>
<styletype="text/css">
.father{
border:1pxsolidred;
}
.child{
width:200px;
height:200px;
float:left;
background-color:green;
}
.cleafix:after{
content:'.';
display:block;
clear:both;
overflow:hidden;
height:0;
}
</style>
</head>
<body>
<divclass="fatherclearfix">
<divclass="child">儿子</div>
</div>
</body>
</html>

当以后需要清除浮动时只需要在标签中再添加一个 “clearfix” 类就行，十分的方便快捷！

编写的伪元素清除法内容解释：

.clearfix:after{
content:'';　　　表示给.clearfix元素内部最后添加一个内容，该内容为行内元素。
display:block;　　　　设置该元素为块级元素，符合内墙法的需求。（有的地方使用table，因为table也是一个块级元素）
clear:both;　　　清除浮动的方法。必须要写
overflow:hidden;　　　　如果用display:none;,那么就不能满足该元素是块级元素了。overflow:hidden;表示隐藏元素，但是该元素占位置；而display:none;不占位置。
height:0;
}

此处梳理一下：after（伪类）和：：after（伪元素）的区别

相同点