1.文档流

在浮动中有一个文档流的概念,也称标准流————元素在排列的时候有默认开始位置以及他们所占的区域


2.浮动

使元素脱离文档流,按照指定的方向发生移动,遇到父级的边界或者相邻的浮动元素就会停下来.

浮动的目的:为了达到自己的布局目的,让指定元素定位在指定位置,并且可以设置浮动后的行级元素的宽高,我们就需要用到浮动

3.浮动的副作用

1). 块状元素,会钻进浮动元素的下面,被浮动元素所覆盖,像这样css基础———浮动的作用及副作用

2). 行内元素,例如文字, 则会环绕在浮动元素的周围,为浮动元素留出空间,像这样:

css基础———浮动的作用及副作用

3. 浮动元素的父元素坍缩, 像这样:

css基础———浮动的作用及副作用

如果我们不希望要这些效果,就需要清除浮动来解决后患,使后面的元素表现的跟浮动前一样,这样

我们既实现了黄色元素浮动,又实现了后来的元素不会受其影响产生不必要的麻烦。


相关文章:

  • 2022-12-23
  • 2021-09-20
  • 2022-02-16
  • 2021-06-09
  • 2022-12-23
  • 2021-07-01
  • 2022-02-03
  • 2022-01-28
猜你喜欢
  • 2021-12-12
  • 2021-05-23
  • 2021-10-16
  • 2021-12-30
  • 2021-07-18
  • 2021-10-30
  • 2021-07-06
相关资源
相似解决方案