您的位置：首页 > Web前端 > HTML5

[html5入门-10]解决设置了float了的子元素的父级边框和背景不显示的问题

2016-10-04 18:36 751 查看

前面讨论了html5布局中float的用法，具体请见：浅谈html5中float的用法

Float直接把一个元素弄成了块级内联标签，用起来是挺爽的，但是偶尔也会产生一些小问题，比如下面这个例子：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>float布局问题</title>
<style type="text/css">
.d1{
width:200px;
border: 2px solid blue;
background: salmon;
}
.d2{
width: 100px;
height: 100px;
background: aqua;
float: left;
}
</style>
</head>
<body>
<div class="d1">
<div class="d2"></div>
</div>
</body>
</html>

给d1设置了背景和宽高，d1的子元素d2设置float之后d1的背景和宽高不显示了，而且d2的上边缘似乎跑到d1边框上面了，效果如下图：

当然，如果给d1加上高度就会显示出来，但是这样做有一个缺点，在页面布局中，如果改变了子级的高度，那么也要调整父级的高度，对于具有多层或多个子级的情况，这种情况并不太实用。

下面比较一下这些防止设置float子级的父级边框和宽高不显示的方法

1.给父级设置宽高

缺点：不利于扩展，也就是子集元素的高度发生了变化，也要同时取修改父级元素的高。

2.让父级元素也浮动

缺点：如果其他元素要保留文档流的问题，也要同样设置浮动。

举个例子

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>float布局问题</title>
<style type="text/css">
.d1{
width:200px;
border: 2px solid blue;
background: salmon;
float: left;
}
.d2{
width: 100px;
height: 100px;
background: aqua;
float: left;
}
</style>
</head>
<body>
<div class="d1">
<div class="d2"></div>
</div>
</body>
</html>

给d2的父级d1也设置了浮动：

可见父级元素的边框和宽高显示出来了。

3.将父级元素设置为块级内联标签或设置overflow：hidden；

举例说明：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>float布局问题</title>
<style type="text/css">
.d1{
width:200px;
border: 2px solid blue;
background: salmon;
display: inline-block;
}
.d2{
width: 100px;
height: 100px;
background: aqua;
float: left;
}
</style>
</head>
<body>
<div class="d1">
<div class="d2"></div>
</div>
</body>
</html>

父级边框和宽高显示出来了。

给父级元素设置overflow：hidden的效果也是一样，不再举例说明。

4.对设置浮动的子级利用标签清除浮动

举例说明：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>利用标签清除浮动</title>
<style type="text/css">
.div1{
width: 200px;
border: 4px solid blue;
}
.div2{
width: 150px;
height: 200px;
background: salmon;
float: right;
}
.clean{
clear: both;
}
</style>
</head>
<body>
<div class="div1">
<div class="div2"></div>
<div class="clean"></div><!--利用标签清除浮动,一定要在浮动标签的后面加一个空标签-->
</div>
</body>
</html>

注意：清除浮动的标签一定要用在body里面子级元素的下面，否则没有效果。

5.利用伪元素清除浮动

在父级元素上设置after标签清除浮动

举例说明：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>利用标签清除浮动</title>
<style type="text/css">
.div1{
width: 200px;
border: 4px solid blue;
}
.div2{
width: 150px;
height: 200px;
background: salmon;
float: right;
}
.div1:after{
content: "";
display: block;
clear: both;
}
</style>
</head>
<body>
<div class="div1">
<div class="div2"></div>
</div>
</body>
</html>

也能产生同样的效果。

6.总结

防止子级设置浮动导致父级边框和宽高不显示的方法，大致可分为两类：

6.1设置清除浮动：利用标签给子级清除浮动，或利用伪元素给父级清除浮动；

6.2 给父级设置属性：给父级设置高度，或者让父级也浮动，或者给父级设置overflow：hidden，或者设置父级display：block

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航