html的文档流,CSS 文档流和 float

8种机械键盘轴体对比

本人程序员，要买一个写代码的键盘，请问红轴和茶轴怎么选？

浏览器将元素流入文档的方法和 float 布局。

使用流

“流”实际就是浏览器在页面上摆放 HTML 元素所用的方法。浏览器从 HTML 文档最上面开始，从上到下沿着元素流逐个显示所遇到的元素。

每个块级元素之后都会换行,块元素会填满容器的整个宽度。

内联元素会在水平方向互相挨着，从左上流向右下。文本是内联元素的一种特殊情况，浏览器会把文本分解成适当大小的内联元素，以适应给定的空间。

如果每个块元素的内联元素在宽度范围内都放得下，就会放在那里；否则，会为内容留出更多的垂直空间，在下一行继续。

外边距的折叠

在并排放置两个内联元素，且两个元素都有外边距时，浏览器会在元素之间创造足够的空间。所以，如果左边的元素外边距为 10px，右边元素外边距为 20px，那么这两个元素之间就会有 30px 的空间。

而当上下放置两个块元素时，浏览器会把它们共同的外边距折叠到一起，折叠后外边距的大小是两个元素中最大外边距的大小。假设上面的元素下边距为 10px， 下面元素的上边距为 20px，折叠后的外边距为 20px。

如果一个元素嵌套在另一个元素中，在都有外边距的情况下，也会发生折叠。

浮动元素

给元素添加 float 属性即可使元素浮动。float 可以设置为 left 或 right。对于浮动元素，它必须有一个宽度。

浏览器如何将它和其他元素流入页面呢？首先，浏览器会正常将元素流入页面。

当遇到浮动元素时，会把它尽可能放到左边或右边。并且还会从流中删除这个元素，就像它浮在页面上。

由于浮动元素以从流中删除，所以其他元素会继续流入正常元素的后面，就像没有这个浮动元素一样。

但是，对内联元素定位时，他们会考虑浮动元素的边界，不会使浮动元素遮挡正常元素，因此会环绕浮动元素。

可以把浮动元素看作被块级元素忽略的元素，但是内联元素知道它们在哪里

clear 属性

clear 属性可以提出请求： 当元素流入页面时，在这个元素左边，右边或两边不允许有浮动元素。当一个 clear 的元素流入页面碰到浮动元素时，会下移直到碰不到浮动元素。