浮动

display属性

none  设置元素不会被显示

inline  元素会被显示为内联元素

block  元素会被显示为块级元素

inline-block  行内块级元素

浮动——float属性

 left  元素向左浮动

right  元素向右浮动

none  默认值,元素不浮动

浮动元素遇到父容器边框或者前一个浮动元素会停下来

clear属性

left  在左侧不允许浮动元素

right  在右侧不允许浮动元素

both  在左右侧不允许浮动元素

none  默认值。允许浮动元素出现在两侧

如何让父容器随子元素自适应高度

  1. clear属性清除浮动

    父容器中所有元素都加了浮动同时父容器没有设置宽高,则需要在最后加一个清除两侧浮动的空div来扩充父容器
  2. overflow进行溢出处理

    给父容器加一个样式 overflow:hidden;

如果页面中有定位元素,并且元素超出了父级的范围,就必须使用clear属性来清除浮动来扩展盒子高度

overflow属性

visible  默认值。内容不会被修剪,会呈现在盒子之外

hidden  内容会被修剪,并且其余内容是不可见的

scroll  内容会被修剪,但是浏览器会显示滚动条以便查看其余内容

auto  如果内容被修剪,则浏览器会显示滚动条以便查看其余内容

 

posted @ 2019-02-10 17:00  大湿兄显灵通  阅读(107)  评论(0)    收藏  举报