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> ----------------- 行, 应用clearfix
<div>第1列</div> -- 列, 应用float
<div>第2列</div>
</div>