1、css布局高级
版心:版心是网站的核心区域,一般居中显示。1024px时代,宽度为960px。现在1000px或者1200px。
1.1只浮动左边的盒子,记得边框border也需要算入预留空间内。
1.2全浮动
margin:0 auto 10px auto;上0下10左右居中。
overfolw:hidden;高度不塌陷
clear:both;清除左右的浮动,当两边元素都不存在浮动元素是才把元素放在标准流当中。
2、清除浮动:
第一种:使用隔墙法,设置一个class="clearboth",设他的css样式为clear:both;
第二种:使用overflow属性清除浮动
方法三:使用after伪对象清除浮动
方法四:使用before after伪对象清除浮动
方法234配合,则成为clearfix
3、clearfix(重点)
原理:大盒子中所有的盒子都浮动,大盒子外面的上下左右都要清除浮动。
.clearfix{
display:table;/*触发bfc,div具有包裹性*/
}
.clearfix:before, .clearfix:after{
content:"";
display:block;
clear:both;
height:0;
}
使用场合:父盒子要把所有子盒子包裹住,父盒子要包裹整行的div元素,需要前后清理浮动。