display属性
none 设置元素不会被显示
inline 元素会被显示为内联元素
block 元素会被显示为块级元素
inline-block 行内块级元素
浮动——float属性
left 元素向左浮动
right 元素向右浮动
none 默认值,元素不浮动
浮动元素遇到父容器边框或者前一个浮动元素会停下来
clear属性
left 在左侧不允许浮动元素
right 在右侧不允许浮动元素
both 在左右侧不允许浮动元素
none 默认值。允许浮动元素出现在两侧
如何让父容器随子元素自适应高度
-
clear属性清除浮动
父容器中所有元素都加了浮动同时父容器没有设置宽高,则需要在最后加一个清除两侧浮动的空div来扩充父容器 -
overflow进行溢出处理
给父容器加一个样式 overflow:hidden;
如果页面中有定位元素,并且元素超出了父级的范围,就必须使用clear属性来清除浮动来扩展盒子高度
overflow属性
visible 默认值。内容不会被修剪,会呈现在盒子之外
hidden 内容会被修剪,并且其余内容是不可见的
scroll 内容会被修剪,但是浏览器会显示滚动条以便查看其余内容
auto 如果内容被修剪,则浏览器会显示滚动条以便查看其余内容