浮动布局

104 阅读1分钟

概念

在浮动布局中,有向左浮动,即所有的浮动标签都向左靠拢对齐,当一行空间不够时,后面的标签被挤到下一行。当然有左浮动,就会有右浮动。

一. 块元素

像div等块标签,在网页显示时,无论其宽的大小,都是独占一行

元素类型

  1. 块元素hdpful(惠普泡芙列)
  2. 行内元素as
  3. 行内块bii(按输图)

二. 浮动

2.在html标签中我们通过float来设置浮动布局

  • float:left; 向左边浮动
  • float:right; 向右边浮动

27BBFA6A-C6B8-454D-A23F-EF2AC421D2A0.png

三. 清除浮动

当然有了浮动后我们会发现会出现,水池上面浮动的标签会遮挡水池下面的固定标签。而这种情况有事我们不想看到的时,可以将通过将固定标签换为下一行,就不会被浮动的标签所遮挡。 在html标签中我们通过clear来设置标签上方不允许有漂浮标签

  • clear:left; 不允许有向左漂浮的标签
  • clear:right; 不允许有向右漂浮的标签
  • clear:both; 不允许有任何方向漂浮的标签 CB0AE65B-5AAB-4A39-91AB-A9CA74E4820C.png 0A8CF14B-D6F4-41B6-8A27-C4AC9723EBA5.png