布局：float、display、overflow

display属性

block: 块级元素

inline: 行级(内联)元素

inline-block: 行内块元素,既在同一行内呈现,也能设置width,height

none: 隐藏元素

float属性

float: left | right | none;

float可以让上下排列的块元素左右排列.

 

浮动元素脱离了标准文档流, 它的高度不会把其父元素撑高, 这称为边框塌陷.

解决方案:

1. 强行设置父元素高度

2. 给父元素设置overflow:hidden

3. 在最后一个浮动元素后添加一个空元素, 设置clear:both

4. 利用after伪类:

.clearfix:after{

content:""; //在末尾追加一个空文本元素

display:block; //呈现为块级,像个div一样

clear:both; // 清除浮动

}

overflow属性

处理溢出

overflow: visible(显示) | hidden(隐藏) | auto(按需显示滚动条) | scroll(强制显示滚动条)

DIV + CSS布局

大事化小

先行后列

见缝插针

 

行列代码模板:

<div> ----------------- 行, 应用clearfix

<div>第1列</div> -- 列, 应用float

<div>第2列</div>

</div>