清除浮动
盒子高度问题
- 在标准流中内容的高度可以撑起盒子的高度
-
<style> -
-
div{ -
border: 1px solid #00
-
-
} -
-
p{ -
width:200px; -
height:100px; -
background-color: blue; -
} -
-
</style> -
-
<div> -
<p></p> -
</div>
在浮动流中浮动元素内容的高不可以撑起盒子的高
<style>
*{
margin: 0;
padding: 0;
}
div{
background-color: red;
}
p{
float: left;
width: 100px;
height: 50px;
background-color: blanchedalmond;
}
p:first-child{
background-color: burlywood;
}
</style>
</head>
<body>
<!--
1.在标准流中内容的高度可以撑起父元素的高度
2.在浮动流中浮动的元素是不可以撑起父元素的高度的
-->
<div>
<p>在浮动流中浮动的元素是不可</p>
<p>在浮动流中浮动的元素是不可</p>
</div>
</body>
清除浮动方式一
-
给前面的父盒子添加高度
-
示例代码:
<style>
*{
margin: 0;
padding: 0;
}
div{
border:1px solid red;
height: 50px;
}
p{
float: left;
width: 100px;
height: 50px;
background-color: blanchedalmond;
}
p:first-child{
background-color: burlywood;
}
</style>
-
注意点:
- 在企业开发中能不写高度就不写高度, 所以这种方式
不常用
- 在企业开发中能不写高度就不写高度, 所以这种方式
清除浮动方式二
-
利用clear:both;属性清除前面浮动元素对后面盒子的影响
-
示例代码:
-
<style> -
*{ -
margin: 0; -
padding: 0; -
} -
.box1{ -
background-color: red; -
} -
.box2{ -
background-color: purple; -
/*这里*/ -
clear: both; -
/*margin无效*/ -
margin-top: 30px; -
} -
ul{ -
list-style: none; -
} -
.ul01 li{ -
background-color: blue; -
} -
.ul02 li{ -
background-color: green; -
} -
ul li{ -
float: left; -
} -
</style> -
-
<div class="box1"> -
<ul class="ul01"> -
<li>大娃</li> -
<li>二娃</li> -
<li>三娃</li> -
</ul> -
</div> -
<div class="box2"> -
<ul class="ul02"> -
<li>李南江</li> -
<li>极客江南</li> -
<li>江哥</li> -
</ul> -
</div>
添加clear: both后
-
注意点:
- 使用clear:both之后margin属性会失效, 所以
不常用
- 使用clear:both之后margin属性会失效, 所以
清除浮动方式三
-
在两个有浮动子元素的盒子之间添加一个额外的块级元素
-
示例代码:
-
<style> -
*{ -
margin: 0; -
padding: 0; -
} -
.box1{ -
background-color: red; -
} -
.box2{ -
background-color: purple; -
} -
ul{ -
list-style: none; -
} -
.ul01 li{ -
background-color: blue; -
} -
.ul02 li{ -
background-color: green; -
} -
ul li{ -
float: left; -
} -
/*这里*/ -
.wall{ -
clear: both; -
} -
.h20{ -
/*利用额外块级元素实现margin*/ -
height: 20px; -
background-color: deepskyblue; -
} -
</style> -
-
<div class="box1"> -
<ul class="ul01"> -
<li>大娃</li> -
<li>二娃</li> -
<li>三娃</li> -
</ul> -
/*<div class="wall"></div>*/
-
</div> -
-
<!--这里--> -
<div class="wall h20"></div> -
-
<div class="box2"> -
<ul class="ul02"> -
<li>李南江</li> -
<li>极客江南</li> -
<li>江哥</li> -
</ul> -
</div>
外墙法特性 1 在两个盒子中间添加一个额外的块级元素 2 给这个额外添加的块级元素设置clear: both;属性 注意点: 外墙法它可以让第二个盒子使用margin-top属性 外墙法不可以让第一个盒子使用margin-bottom属性内墙法：
-
内墙法 1 在第一个盒子中所有子元素最后添加一个额外的块级元素 2 给这个额外添加的块级元素设置clear: both;属性 注意点: 内墙法它可以让第二个盒子使用margin-top属性 内墙法它可以让第一个盒子使用margin-bottom属性
外墙法和内墙法区别?
外墙法不能撑起第一个盒子的高度, 而内墙法可以撑起第一个盒子的高度
注意点
- 在外墙法中可以通过设置额外标签的高度来实现margin效果
- 搜狐中大量使用了这个技术, 但是由于需要添加大量无意义的标签, 所以
不常用
- 内墙法会自动撑起盒子的高度, 所以可以直接设置margin属性
- 和外墙法一样需要添加很多无意义的空标签，有违结构与表现的分离，在后期维护中将是噩梦
清除浮动方式四
什么是overflow:hidden?
- overflow:hidden的作用是清除溢出盒子边框外的内容
示例代码
.test{width: 100px;height: 100px;border: 1px solid #000;background-color: red;overflow: hidden;}<div class="test">我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字</div>
添加overflow:hidden后
如何利用overflow:hidden;清除浮动
- 给前面一个盒子添加overflow:hidden属性
<style>*{margin: 0;padding: 0;}.box1{background-color: red;/*这里*/overflow: hidden;*zoom:1;}.box2{background-color: purple;/*margin有效*/margin-top: 20px;}ul{list-style: none;}.ul01 li{background-color: blue;}.ul02 li{background-color: green;}ul li{float: left;}</style><div class="box1"><ul class="ul01"><li>大娃</li><li>二娃</li><li>三娃</li></ul></div><div class="box2"><ul class="ul02"><li>李南江</li><li>极客江南</li><li>江哥</li></ul></div>
添加overflow:hidden和margin-top:20px后:
注意点:
- 由于overflow:hidden可以撑起盒子的高度, 所以可以直接设置margin属性
- IE8以前不支持利用overflow:hidden来清除浮动, 所以需要加上一个*zoom:1;
- 实际上*zoom:1能够触发IE8之前IE浏览器的hasLayout机制
- 优点可以不用添加额外的标签又可以撑起父元素的高度, 缺点和定位结合在一起使用时会有冲突
*zoom:1;和_zoom:1的区别
- 这个是hack写法，用来识别不同版本的IE浏览器
- _后面的属性只有IE6能识别
- *后面的属性 IE6 IE7能识别
添加知识点:
overflow: hidden;作用 1 可以将超出标签范围的内容裁剪掉 2清除浮动 3可以通过overflow: hidden;让里面的盒子设置margin-top之后, 外面的盒子不被顶下来 之前达到这个要求 需要给外部盒子添加border 即添加边框 如下<style> .box1{ width: 200px; height: 200px; background-color: red; /*border: 1px solid #000;*/ overflow: hidden; *zoom:1; } .box2{ width: 100px; height: 100px; background-color: blue; margin-top: 20px; } </style> <div class="box1"> <div class="box2"></div> </div>
清除浮动方式五
给前面的盒子添加伪元素来清除浮动
示例代码
<style> *{ margin: 0; padding: 0; } .box1{ background-color: red; } .box2{ background-color: purple; /*margin有效*/ margin-top: 20px; } ul{ list-style: none; } .ul01 li{ background-color: blue; } .ul02 li{ background-color: green; } li{ float: left; } /*这里*/ .clearfix:after { /*生成内容作为最后一个元素*/ content: ""; /*使生成的元素以块级元素显示,占满剩余空间*/ display: block; /*避免生成内容破坏原有布局的高度*/ height: 0; /*使生成的内容不可见，并允许可能被生成内容盖住的内容可以进行点击和交互*/ visibility: hidden; /*重点是这一句*/ clear: both; } .clearfix { /*用于兼容IE, 触发IE hasLayout*/ *zoom:1; }</style><div class="box1 clearfix"> <ul class="ul01"> <li>大娃</li> <li>二娃</li> <li>三娃</li> </ul></div><div class="box2"> <ul class="ul02"> <li>李南江</li> <li>极客江南</li> <li>江哥</li> </ul></div>
添加伪元素前
添加伪元素后
注意点:
- 本质上和内墙法一样, 都是在前面一个盒子的最后添加一个额外的块级元素
- 添加伪元素后可以撑起盒子的高度, 所以可以直接设置margin属性
- CSS中还有一个东西叫做伪类, 伪元素和伪类不是同一个东西
清除浮动方式六
给前面的盒子添加双伪元素来清除浮动
<style>*{margin: 0;padding: 0;}.box1{background-color: red;}.box2{background-color: purple;/*margin有效*/margin-top: 20px;}ul{list-style: none;}.ul01 li{background-color: blue;}.ul02 li{background-color: green;}li{float: left;}/*这里*/.clearfix:before,.clearfix:after {content:"";display:table;/*重点是这一句*/clear:both;}.cf {zoom:1;}</style><div class="box1 clearfix"><ul class="ul01"><li>大娃</li><li>二娃</li><li>三娃</li></ul></div><div class="box2"><ul class="ul02"><li>李南江</li><li>极客江南</li><li>江哥</li></ul></div>
添加双伪元素后:
- 添加伪元素后可以撑起盒子的高度, 所以可以直接设置margin属性
- 先知道有这些方式, 原理需要学习到BFC和hasLayout才能明白
- 支持BFC的浏览器（IE8+，firefox，chrome，safari）通过创建新的BFC闭合浮动；
- 不支持 BFC的浏览器 （IE5-7），通过触发 hasLayout 闭合浮动。
1430
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
