网页里布局用的最多的属性,float:left/right;

1.1 浮动元素脱离文档流

证明1:

css中的浮动问题

证明2:在标准文档流中,给行内元素设置宽高是无效的,如果行内元素脱离文档流(设置浮动),就可以正常设置宽高了

css中的浮动问题 css中的浮动问题

    1. 浮动元素互相贴靠

如果有足够空间,那么3个盒子就会贴靠摆放:

css中的浮动问题

 

 

 

如果没有足够空间3就会被挤下来,贴着1摆放

css中的浮动问题

如果空间非常小仅仅够摆放一个盒子:

css中的浮动问题

还有向右浮动的特性,是先解析先渲染

css中的浮动问题

css中的浮动问题

    1. 文字包围效果

css中的浮动问题 css中的浮动问题

    1. 元素浮动会导致父元素自动撑起高度收缩

css中的浮动问题

如果给上图中div内部的元素p标签,设置了浮动,那么div的高度会产生收缩的效果:如下图。

css中的浮动问题

1.5 浮动的清除

方法1:给浮动元素的父元素(祖先元素)加高度,就好像关住一个盒子的出口

方法2:当出现浮动元素之后,在浮动元素的后方设置清除浮动的属性:clear:both;

方法3: overflow:hidden;如果超出子元素高度超出范围,则不显示也没有滚动条   overflow:auto;;如果超出子元素高度超出范围,则不显示但是有滚动条

相关文章:

  • 2022-12-23
  • 2022-02-14
  • 2021-12-09
  • 2022-12-23
  • 2021-10-14
  • 2021-05-23
  • 2021-09-02
  • 2021-06-07
猜你喜欢
  • 2021-12-19
  • 2021-11-17
  • 2022-02-12
  • 2022-01-07
  • 2021-07-01
  • 2021-09-20
  • 2021-09-17
相关资源
相似解决方案