欢迎光临新华电脑职业培训-现代电脑-新东方学校网站!
您现在所处的位置:新华培训 > 技术支持 >

泉州网页培训班-CSS万能的闭合代码你应该会用它才对-福建百科教育网-技术支持

作者:泉州新华培训  时间:2020-03-14   点击数:   收藏  分享到:

泉州网页培训班-CSS万能的闭合代码你应该会用它才对-福建百科教育网


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
.clearfix:after{
 content:".";
 display:block;
 height:0;
 line-height:0;
 clear:both;
 visibility:hidden;
}
.clearfix{display:inline-block;}
/* Hide from IE Mac */
.clearfix{display:block;}
/* End hide from IE Mac */
/* end of clearfix */
</style>
</head>
 
<body>
<div style="border:2px solid red;" class="clearfix">
  <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>
  <div style="float:left;width:80px;height:80px;border:1px solid blue;">CSSBBS</div>
  <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>
  <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>
  <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>
</div>
</body>
</html>

可以看到,作为外部容器的边框为红色的DIV,没有被撑开。这是因为内部的DIV因为float:left之后,就丢失了clear:both和 display:block的样式,所以外部的DIV不会被撑开。

此时给外围div加一个clearfix的class便可以解决