网页的布局方式之革除浮动
盒子的高度问题
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>信赖看了本案牍例你已经把握了办法，更多出色请关注百分百源码网其它相关文章！
引荐阅读：
CSS的背景与精灵图
CSS的显示模式怎样使用
以上就是 网页的规划方式之清除浮动的具体内容，更多请关注百分百源码网其它相关文章！
