您的位置：首页 > Web前端

前端.关于清除浮动和盒子无法撑开的问题（图文解释）

2016-11-06 20:24 656 查看
在打码的时候遇到了一个问题

<!DOCTYPE html >
<head>
<title>something about float</title>
</head>
<style>
#one{   background-color:#CCCCCC;}
.mid{   float: left;}
.main{float: left;}
.main_left{float: left;}
</style>
<body >
<div id="one">
<div class="mid">
<div class="main_left">
<h2>TTTTTTTTTTTTTTTTTTT</h2>
<p>11111111111111111111111111111111111</p>
</div>
</div>
</div>

</body>
</html>


main_left盒子是包在one盒子里的，但是显示和审查元素却是这样的



<h2>
并没有背景色。即main_left盒子并没有被one盒子给包进去，但是main_left盒子在HTML中确实是在one盒子里面

这是什么个操作？

想不明白，问了学霸明，他说要撑开盒子有个套路，即



在后面加一串这东西，盒子就能被撑开了。

果然，加了之后的显示是



h2
拥有了背景色，main_left盒子被包进去了，还有这种操作的？

所以咸鱼我翻了一些博文和帖子，自己总结了有关这方面的一点只是

1.产生的原因：浮动



如图中所示，如果按照普通文档流，两个黑盒子本应该在红盒子中。但是因为

两个盒子被float给浮起来了，于是它们脱离了普通普通文档流，所以红盒子包不住它们了

2.所带来的坏处

⑴就像我遇到的情况，因为父级无法被撑开。背景与边框无法显示

⑵设置的外边距内边距无法正常显示

3.解决方案

这个在网上查了下，发现不止一种解决方法

⑴对父级设置适合CSS高度

即计算好所要包含的盒子的高度+边框的高度等等，然后父级的高度大于之和就有了

但是前提是对象内容高度要能确定并能计算好

⑵clear:both清除浮动

实现这种方法的手段有多种，上面提到的在one后加伪元素after是一种方法

还有一种方法，即在CSS中定义 .clear{clear:both;}

在盒子末尾加上一个
就行了

即：

<!DOCTYPE html >
<head>
<title>something about float</title>
</head>
<style>
#one{   background-color:#CCCCCC;}
.mid{   float: left;}
.main{float: left;}
.main_left{float: left;}
</style>
<body >
<div id="one">
<div class="mid">
<div class="main_left">
<h2>TTTTTTTTTTTTTTTTTTT</h2>
<p>11111111111111111111111111111111111</p>
</div>
</div>
<div style="clear: both;"></div>
</div>
</body>
</html>


⑶父级div定义 overflow:hidden

在one中加上overflow:hidden。即



个人推荐第二种，在咸鱼看过的各个实例中也用的多

若有错误，欢迎大佬指正

以上。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航