CSS第四、五天——普通流、浮动、清除浮动、css属性书写顺序、基线对齐vertical-align

布局三种机制

普通流：块级　独占一行　　　行内　一行共存多个
浮动：普通流浮起　多个块级　一行显示
定位

浮动

页面效果布局，多个盒子一行显示
float：left　right　none
特点：脱离了标准流
　　　不占位
　　　行内块　没有缝隙　父级宽不够盒子掉下一行

常见布局

左右布局：　左浮动　右浮动
左中右布局：左浮动　左浮动　右浮动
实际导航nav：　ul嵌套li，li嵌套a
　　　　　　　li左浮动，a转块级

清除浮动　有时不能给父级盒子设置高度

＜１＞最后一个浮动子元素，加上

<div style=“clear:both;”>div>

＜２＞父级加　overflow:hidden;
＜３＞after伪元素　标签加上　class=“clearfix”

.clearfix:after {
     
	content: "";
	display: block;
	height: 0;
	visibility: hidden;
 	clear: both;
}
.clearfix {
     
    *zoom: 1;  /*ie6,7 专门清除浮动的样式*/
}

＜４＞双伪元素　标签加上　class=“clearfix”

.clearfix:before ,.clearfix:after {
     
	content: "";
	display: table;
 }
.clearfix:after {
     
     clear:both;
}
.clearfix {
     
    *zoom: 1;  /*ie6,7 专门清除浮动的样式*/
}

简单了解overflow

overflow:hidden; 　溢出隐藏
overflow:auto; 　溢出滚动，滚动条

CSS第五天

css属性书写顺序

布局定位——自身属性——文本属性——其他属性（CSS3）

基线对齐　vertical-align

行内元素、行内块、文字

中心基线对齐：vertical-align: middle;
底线对齐：　　vertical-align: bottom;
顶线对齐：　　vertical-align: top;