章节(16) 清除浮动
2017-05-21 本文已影响30人
壹点微尘
盒子的高度问题
1.标准流中盒子的高度可以被内容高度撑起来;
2.浮动流中浮动的内容不能撑起盒子的高度;
为什么要清楚浮动?
相邻的盒子之间,如果前面的盒子没有高度,那么后面盒子中的浮动元素就会去找前面盒子中的浮动元素,这样会导致界面混乱,所以需要清除浮动;
清除浮动方式一:
解决方案:
给前面一个父元素设置高度
注意点:
在企业开发中, 我们能不写高度就不写高度, 所以这种方式用得很少;
CSS:
<style>
*{
margin: 0;
padding: 0;
}
.box1{
height: 20px; //给前面盒子设置高度
background-color: red;
}
.box2{
background-color: green;
}
.box1 p{
width: 100px;
background-color: blue;
}
.box2 p{
width: 100px;
background-color: yellow;
}
p{
float: left;
}
</style>
body:
<div class="box1">
<p>我是文字1</p>
<p>我是文字1</p>
<p>我是文字1</p>
</div>
<div class="box2">
<p>我是文字2</p>
<p>我是文字2</p>
<p>我是文字2</p>
</div>
清除浮动方式二:
解决方案:
给后面的盒子添加clear:both;属性
clear属性取值:
none: 默认取值, 按照浮动元素的排序规则来排序(左浮动找左浮动, 右浮动找右浮动)
left: 不要找前面的左浮动元素(也就是:不要和前面的左浮动元素显示在一行)
right: 不要找前面的右浮动元素
both: 不要找前面的左浮动元素和右浮动元素
注意点:
当我们给某个元素添加clear属性之后, 那么这个属性的margin属性就会失效;所以不推荐使用
CSS:
<style>
*{
margin: 0;
padding: 0;
}
body{
border: 1px solid #000;
}
.box1{
background-color: red;
}
.box2{
background-color: green;
clear: both; //给后面的盒子添加clear:both;属性
margin-top: 28px;
}
.box1 p{
width: 100px;
background-color: blue;
}
.box2 p{
width: 100px;
background-color: yellow;
}
p{
float: left;
}
</style>
清除浮动方式三:
解决方案:
外墙法:在两个有浮动子元素的盒子之间添加一个额外的块级元素;并且设置clear: both;属性;
注意点:
外墙法它可以让第二个盒子使用margin-top属性,
外墙法不可以让第一个盒子使用margin-bottom属性,
不过可以通过设置额外标签的高度来实现margin效果;
搜狐中大量使用了这个技术,但是由于需要添加大量无意义的标签,所以不推荐使用;
CSS:
<style>
*{
margin: 0;
padding: 0;
}
.box1{
background-color: red;
/*margin-bottom: 10px;*/ //外墙法不可以让第一个盒子使用margin-bottom属性,
}
.box2{
background-color: green;
/*margin-top: 10px;*/ //外墙法它可以让第二个盒子使用margin-top属性,
}
.box1 p{
width: 100px;
background-color: blue;
}
.box2 p{
width: 100px;
background-color: yellow;
}
p{
float: left;
}
.wall{
clear: both; //设置clear: both;属性;
}
.h20{
height: 20px; //设置额外标签的高度来实现margin效果;
background-color: skyblue;
}
</style>
<div class="box1">
<p>我是文字1</p>
<p>我是文字1</p>
<p>我是文字1</p>
</div>
<div class="wall h20"></div> //外墙法:在两个有浮动子元素的盒子之间添加一个额外的块级元素;
<div class="box2">
<p>我是文字2</p>
<p>我是文字2</p>
<p>我是文字2</p>
</div>
清除浮动方式四:
解决方案:
内墙法:
1在第一个盒子中所有子元素最后添加一个额外的块级元素,
2给这个额外添加的块级元素设置clear: both;属性
注意点:
内墙法它可以让第二个盒子使用margin-top属性
内墙法它可以让第一个盒子使用margin-bottom属性
<a>内墙法会自动撑起盒子的高度,所以可以直接设置margin属性</a>
外墙法和内墙法区别?
外墙法不能撑起第一个盒子的高度, 而内墙法可以撑起第一个盒子的高度
在企业开发中<a>不常用隔墙法</a>来清除浮动 (隔墙法:外墙法和内墙法)
CSS:
<style>
*{
margin: 0;
padding: 0;
}
.box1{
background-color: red;
/*margin-bottom: 10px;*/
}
.box2{
background-color: green;
/*margin-top: 10px;*/
}
.box1 p{
width: 100px;
background-color: blue;
}
.box2 p{
width: 100px;
background-color: yellow;
}
p{
float: left;
}
.wall{
clear: both;
}
.h20{
height: 20px;
background-color: skyblue;
}
</style>
</head>
<div class="box1">
<p>我是文字1</p>
<p>我是文字1</p>
<p>我是文字1</p>
<div class="wall h20"></div> //设置内墙
</div>
<div class="box2">
<p>我是文字2</p>
<p>我是文字2</p>
<p>我是文字2</p>
</div>
伪元素选择器
1.什么是伪元素选择器?
伪元素选择器作用就是给指定标签的内容前面添加一个子元素或者给指定标签的内容后面添加一个子元素
2.格式:
- 2.1标签名称::before{
属性名称:值;
}
给指定标签的内容前面添加一个子元素 - 2.2标签名称::after{
属性名称:值;
}
给指定标签的内容后面添加一个子元素
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 200px;
height: 200px;
background-color: red;
}
div::before{
content: "爱你";
width: 50px;
height: 50px;
background-color: pink;
display: block;
}
div::after{
/*指定添加的子元素中存储的内容*/
content: "么么哒";
/*指定添加的子元素的宽度和高度*/
width: 50px;
/*height: 50px;*/
/*内容是可以超出标签的范围的, 所以高度为0依然可以看见内容*/
height:0;
background-color: pink;
/*指定添加的子元素的显示模式*/
display: block;
/*隐藏添加的子元素*/
visibility: hidden;
}
</style>
<div>
<!--<p>爱你</p>-->
我是文字
<!--<p>么么哒</p>-->
</div>
伪元素选择器.png
清除浮动方式五: (推荐使用)
解决方案:给前面的盒子添加伪元素来清除浮动;
本质上和内墙法一样,都是在最后添加了一个块级元素;推荐使用!
//给前面的盒子添加伪元素来清除浮动
.box1::after{
/*设置添加的子元素的内容为空*/
content: "";
/*设置添加的子元素为块级元素*/
display: block;
/*设置添加的子元素的高度为0*/
height: 0;
/*设置添加的子元素看不见*/
visibility: hidden;
/*给添加的子元素设置clear: both;*/
clear: both;
}
.box1{
/*兼容IE6*/
*zoom:1;
}
完整代码如下:
<style>
*{
margin: 0;
padding: 0;
}
.box1{
background-color: red;
/*margin-bottom: 10px;*/
}
.box2{
background-color: green;
/*margin-top: 10px;*/
}
.box1 p{
width: 100px;
background-color: blue;
}
.box2 p{
width: 100px;
background-color: yellow;
}
p{
float: left;
}
//给前面的盒子添加伪元素来清除浮动
.box1::after{
/*设置添加的子元素的内容为空*/
content: "";
/*设置添加的子元素为块级元素*/
display: block;
/*设置添加的子元素的高度为0*/
height: 0;
/*设置添加的子元素看不见*/
visibility: hidden;
/*给添加的子元素设置clear: both;*/
clear: both;
}
.box1{
/*兼容IE6*/
*zoom:1;
}
</style>
<div class="box1">
<p>我是文字1</p>
<p>我是文字1</p>
<p>我是文字1</p>
</div>
<div class="box2">
<p>我是文字2</p>
<p>我是文字2</p>
<p>我是文字2</p>
</div>
清除浮动方式六:
解决方案:给前面的盒子添加overflow: hidden;属性
overflow: hidden的作用是清除溢出盒子边框外的内容,但是由于overflow: hidden会触发Block Formatting Contexts,所以也可以清除浮动;
另外一个作用:可以通过overflow: hidden;让里面的盒子设置margin-top之后, 外面的盒子不被顶下来;(两个盒子嵌套)
注意点:由于overflow: hidden可以撑起盒子的高度,所以可以直接设置margin属性,IE8以前不支持利用overflow: hidden来清除浮动,所以需要加上*zoom:1;
优点:可以不用添加额外的标签又可以撑起父元素的高度;
缺点:和定位结合在一起使用时会有冲突,所以不推荐使用;
CSS:
.box1{
background-color: red;
overflow: hidden; //给前面的盒子添加overflow: hidden;属性
*zoom:1; //适配IE8
}
.box2{
background-color: green;
}
.box1 p{
width: 100px;
background-color: blue;
}
.box2 p{
width: 100px;
background-color: yellow;
}
p{
float: left;
}
<div class="box1">
<p>我是文字1</p>
<p>我是文字1</p>
<p>我是文字1</p>
</div>
<div class="box2">
<p>我是文字2</p>
<p>我是文字2</p>
<p>我是文字2</p>
</div>
