本文详细介绍了HTML文档流的概念，包括块元素和内联元素的特点。接着讲解了CSS浮动属性(float)，如何使元素脱离文档流并实现文字环绕效果。还探讨了浮动带来的高度塌陷问题及其解决方案，如BFC（块级格式化上下文）和清除浮动。最后，讨论了定位(position)的三种类型：相对定位、绝对定位和固定定位，以及层级和透明度的设置。这些知识点对于理解和控制网页布局至关重要。
1.文档流
文档即一个网页，文档流处在网页的最底层，它表示的是页面中的一个位置，我们所创建的元素默认都处在文档流当中。通过浮动和定位可以脱离文档流。
元素在文档流中的特点块元素：
1.块元素会在文档流中独占一行，块元素会至上而下排列。
2.块元素在文档流中的宽度默认值为auto(自动)，即为父元素的100%。
3.块元素在文档流中的高度默认为内容高度，即被内容撑开，没有内容就为0，有内容的话，内容多少它就多少。内联元素：
1.内联元素在文档流中只占自身大小，默认从左向右排列。如果一行中无法容纳所有内联元素，则会换行，继续自左向右排列。
2.在文档流中，内联元素的宽和高都默认被内容撑开。
2.浮动-float属性
float属性可以使元素浮动，从而脱离文档流。
可选值：none：默认值，元素默认在文档流中排列。
right：元素立即脱离文档流，向页面的右侧浮动。
left：元素立即脱离文档流，向页面的左侧浮动。
特点介绍：当一个元素设置浮动后(非none值)；元素立即脱离文档流，元素脱离文档流后，它原本的位置将会失去，后边的元素会立即顶上。
元素浮动后，会尽量向页面的右上(right)或左上(left)浮动，直到遇到父元素的边框或者其他浮动元素，而且在浮动元素的额上边原本有一个块元素，该块元素没有浮动，浮动元素不会超过该块元素，即不会越界上一行。
浮动元素也不会超过它的上一个浮动元素，最多和上一个同一行(位置不够会转行)，不会因为上上个浮动元素后还有块位置，因容不下上个浮动元素而空出，却能容下本浮动元素，而跨上一个取上上个边上。
浮动的元素不会覆盖文字，文字会环绕在元素的周围。所以我们可以通过设置浮动来做一个文字的效果，就文字所在的块元素不用固定大小，让文字自由撑开。
一般没有设置固定宽度和高度的块元素，其宽度是默认占满一行(父元素的100%)，但是被设置浮动后，它的宽度和高度都会默认被内容撑开。没有内容即为0.
内联元素脱离文档流后会变成
最低0.47元/天 解锁文章
扫一扫
205
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
