这里的<div style="clear:both"></div>是清除了哪部分浮动？为什么不加会和上部分有空隙
<style>
body{padding:0; margin:0;}
.box1{ height:50px; width:100%; background-color:#222222;margin:0 auto;}
.box1-1{ width:1250px; height:50px;margin:0 auto;}
.box1-2 a{ float:right; color:#9D9D9D;font-family:微软雅黑; font-size:16px; margin-top:16px;}
ul{ float:left}
ul li{ list-style:none; float:left;font-size:16px; font-family:微软雅黑; margin-right:15px; }
a{ text-decoration:none; color: #9D9D9D;}
.box2{ height:500px; width:100%; background:#2D143E; text-align:center; }
.box2-1{ width:300px; height:60px; background-color:#337AB7; margin:20px auto; line-height:55px; font-size:17px; color:#FFFFFF; font-family:微软雅黑; border-radius:10px;}
.box2-2{ color: #7E889B}
h1{ font-size:75px; color:#FFFFFF; margin-top:80px;}
p{ font-size:35px; color: #FFFFFF}
</style>
</head>
<body>
<div class="box1">
<div class="box1-1">
<ul>
<li><a href="#">Bootstrap中文网</a></li>
<li><a href="#">aBootstrap2中文文档</a></li>
<li><a href="#">aBootstrap3中文文档 </a></li>
<li><a href="#">Bootstrap 4.0 预览</a></li>
<li><a href="#">Less 教程</a></li>
<li><a href="#">jQuery API</a></li>
<li><a href="#">网站实例</a></li>
<li><a href="#">前端高薪职位</a></li>
</ul>
<div class="box1-2"><a href="#">关于</a></div>
</div>
</div>
<div class="box2">
<div style="clear:both"></div>
<h1>Bootstrap</h1>
<p>简洁、直观、强悍的前端开发框架，让web开发更迅速、简单。</p>
<div class="box2-1">Bootstrap2中文文档(v3.3.5)</div>
<div class="box2-2">Bootstrap2中文文档(v2.3.2)</div>
</div>
</body>
最新回答
天生傲骨
2026-04-22 10:53:24
clear:both是清除左浮动和右浮动，由于上面box里面的a和li经行了浮动因此后面的会受到他们的影响照成浮动，<div style="clear:both"></div>目的是清除前面的浮动对后面的影响。
如果不写这个代码可以在子级添加浮动属性之后给父级添加“overflow：hidden”,同样可以清除浮动；
你上面的代码将<div style="clear:both"></div>删除，然后给.box1-1、.box1-2添加overflow：hidden即可清除浮动影响，正常显示
如下图所示
然后你说的中间很大的空白是由于共用边界引起的，可以给h1的父级box2加边框或者添加overflow：hidden即可解决（一般情况是添加overflow：hidden，因为border边框是有颜色的）；
纯手打，望采纳 谢谢！！！
热门标签
