版心的概念
版心就是,網 站的核心展示區(qū)域响鹃,一般居中顯示驾霜。版心寬度一般是:960px、1000px
清除浮動买置,就是讓當前元素左右兩邊都不在浮動元素都不存在浮動元素的時候才把元素放到標準流匯總
clear: both;
清除浮動
常用四種清除浮動的方法:
方法一:使用空標記清除浮動粪糙,隔墻放,增加標簽
方法二:使用overflow屬性清除浮動忿项。會誤傷
方法三:使用after偽對象清除浮動蓉冈。
方法四:使用before after偽對象清除浮動
clearfix 整體清除浮動方案
使用場景:
1城舞、父盒子要所有的子盒子包裹住
2、父盒子是包裹正行的div元素寞酿,需要前后進行清除浮動
<style>
? ? ? ? ? *{ padding: 0px; margin: 0; }
? ? ? ? ? .header, .aside, .main, .footer{
? ? ? ? ? ? ? ?border: 1px solid yellow; /*bd + tab*/
? ? ? ? ? ? ? ?background-color: silver;
? ? ? ? ? ? ? ?margin-bottom: 10px;
? ? ? ? ? ? ? ?height: 200px;
? ? ? ? ? }
? ? ? ? ? .aside{
? ? ? ? ? ? ? ?height: 300px;
? ? ? ? ? ? ? ?float: left;
? ? ? ? ? ? ? ?width: 200px;
? ? ? ? ? }
? ? ? ? ? .main{
? ? ? ? ? ? ? ?float: left;
? ? ? ? ? ? ? ?/*margin-left: 202px;*/
? ? ? ? ? ? ? ?width: 980px;
? ? ? ? ? }
? ? ? ? ? .clearfix{
? ? ? ? ? ? ? ?display: table; /*觸發(fā)bfc,div具有的包裹性*/
? ? ? ? ? }
? ? ? ? ? .clearfix:before,.clearfix:after{
? ? ? ? ? ? ? ?content: "";
? ? ? ? ? ? ? ?display: block;
? ? ? ? ? ? ? ?clear: both;
? ? ? ? ? ? ? ?height: 0;
? ? ? ? ? ? ? ?visibility: hidden;
? ? ? ? ? }
? ? ? ? ? .clearfix{
? ? ? ? ? ? ? ?_zoom: 1;
? ? ? ? ? }
? ? ?</style>