使用浮动实现网页布局
注意事项
1、垂直显示的盒子,不要设置浮动,只有并排显示的盒子才要设置浮动!
2、“大盒子带着小盒子跑”,一个大盒子中,又是一个小天地,内部可以继续使用浮动 。
3、多用div标签。
BFC规范和浏览器差异
BFC规范
BFC(Box Formatting Context,块级格式化上下文)是页面上的一个隔离的独立容器,容器里面的子元素不会影响到
外面的元素,反之亦然。
一个盒子不设置height,当内容子元素都浮动时,无法撑起自身,这个盒子没有形成BFC。
如何创建BFC
方法①:float的值不是none ;
方法②:position的值不是static或者relative ;
方法③:display的值是inline-block、flex或者inline-flex;
方法④:overflow:hidden。
什么是overflow:hidden;
overflow:hidden;表示溢出隐藏,溢出盒子边框的内容将会被隐藏,overflow:hidden;是非常好用的让盒子形成BFC的方法。示例如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 400px;
border: 10px solid #000;
overflow: hidden;
}
.box .c1{
width: 200px;
height: 200px;
background-color: orange;
float: left;
}
.box .c2{
width: 200px;
height: 200px;
background-color: blue;
float: left;
}
</style>
</head>
<body>
<div class="box">
<div class="c1"></div>
<div class="c2"></div>
</div>
</body>
</html>
网页效果如下:
BFC的其他作用
1、BFC可以取消盒子margin塌陷
2、BFC可以可以阻止元素被浮动元素覆盖
浏览器差异
1、IE6、7浏览器使用haslayout机制,和BFC规范略有差异,比如IE浏览器可以使用zoom:1属性“让盒子拥有layout”
2、如果要制作兼容到IE6、7的网页时,尽量让网页布局变得简单,内部有浮动的盒子要设置height属性,规范编程。