Notes

CSS 浮动

特点

• 其他内容环绕在浮动元素周围
• 浮动元素脱离正常流

副作用

• 高度塌陷
  • 浮动元素不能把包含块的高度撑开
• 影响兄弟元素的位置或样式
• 行内元素(inline) 与块级元素(block), 在设置浮动后，都会变成 inline-block 元素，对外为内联元素，但对内是块级布局，具有宽高

取值

float: left;
float: right;
float: none;

浮动范围

概念

• 包含块：浮动元素的包含块是离它最近的块级(block)祖先元素

浮动范围

• 浮动元素虽然会浮动，但不会浮出到包含块的边界外
  • 这里的浮出是指，浮动元素的左上或右上位置
  • 无论是 float: left 还是 float: right, 浮动元素都是优先向上浮，然后再根据 left 或 right 向左或向右靠齐
• 在包含块中，若浮动元素前有内容 A, 则 A 会阻止浮动元素向上靠齐，即浮动元素会排列在 A 下面
• 当浮动元素的大小比包含块要大时，同时包含块没有设置 overflow:hidden, 那么浮动元素超出包含块的部分也会显示

BFC 格式化上下文

• 两个相邻的浮动元素，会创建出一个格式化上下文，这两个浮动元素并不会重叠或互相覆盖

浮动元素与非浮动元素重叠

• 浮动元素与行内元素(inline) 重叠时，行内元素的边框，背景和内容在浮动元素之上
• 浮动元素与块级元素(block) 重叠时，块级元素的边框，背景在浮动元素之下，但块级元素的内容在浮动元素之上

清除浮动

使用 BFC 包裹

其中一种

1. 设置浮动元素的包含块样式 overflow: hidden (只要不是 visible 就行了)
   • 缺点，不能显示超出包含块部分的内容
2. 设置包含块也浮动起来

使用 clear 属性

clear 属性清除浮动的原理是

添加元素的上外边距 margin-top, 使得元素出现在浮动元素的下方，这个 margin-top 的值就等于浮动元素的高度

<section>
  <div style="float: left"></div>
  <p style="clear: both"></p>
</section>

然而，这种方法的缺点时，需要特意创建一个空的元素，对 HTML 文档造成浪费和污染，因此，常用的是使用伪元素的方法

section::after {
  content: "";
  clear: both;
  visibility: hidden;
  display:block;
  height: 0;
}