关于html文档流，行内元素，块元素，和float属性

Love The Way You Lie 2022-12-04 01:20 101阅读 0赞

## 关于html文档流，行内元素，块元素，和float属性 ##

关于html中的float元素，在开始写静态网站时候，真的是非常的坑人。

在讲float属性时，我先说一下，文档流这个概念。当然文档流这个概念全是我自己理解的，如果有错，希望指出。

首先我自己把一个网页比作一个平面，在这个平面内，所有的div，p，h等元素都是布置在这个平面内的。而这些元素，我认为首先要了解这些元素哪些是行内元素，哪些块元素。

行内元素元素在布置到平面后是不需要换行的，也就是说行内元素是彼此挨着彼此的。而块元素是需要换行的，是一行一行的。刚开始写静态网站时，div等所有元素都是看不到的，所以在布局时候我喜欢在css中常用的一些元素加一些属性，让这些元素显示出来。  
例如：  
div\{  
border-style: solid;  
border-color: red;  
border-width:1px;  
\}  
这个会让div有一个红色的边框，这样div就不再是隐形的了，这样会使布局更加容易。

文档流个人理解就是，所有的元素在不加定位的情况下，元素在网页这个平面内的一行一行占的位置。

而float属性会使元素脱离文档流，脱离文档流，我举个例子就是，使元素脱离这个平面，先前已经说了，我把一个网页比作一个平面。就相当于比如有一张纸，纸上画了一头牛，对这头牛使用float属性，那么这头牛就会从这张纸上浮起来，也就是说纸变成了空白的纸。

但是float属性并不会使元素完全脱离文档流，float属性只是脱离正常的文档流但是还会占据文档流原有的文本空间，就上面那个例子，牛浮了起来后，你可以在牛下方的纸上在画一只猫，一只狗，但是你不能在牛下方的纸上写一串文字，因为牛虽然浮起来了，但是它任然占据了原本的文字空间。并且脱离了文档流的元素，它不会在像块元素和行内元素一样要分行，他们都是彼此挨着彼此，通过margin-left等来调节距离，直到一行内容不下了才会换行。

**因为刚学这个，所以很多东西，我自己也说不清楚。如果没看懂，可以看下面两个链接  
关于float脱离文档流：[https://blog.csdn.net/banana960531/article/details/82894397][https_blog.csdn.net_banana960531_article_details_82894397]  
三种脱离文档流的方式：[https://blog.csdn.net/theLostLamb/article/details/79581984][https_blog.csdn.net_theLostLamb_article_details_79581984]  
然后就是开始写博客可能很多东西写得不好，但是我自己经常遇到的问题，我还是决定写下来加深自己的记忆。写的不好希望理解**

[https_blog.csdn.net_banana960531_article_details_82894397]: https://blog.csdn.net/banana960531/article/details/82894397
[https_blog.csdn.net_theLostLamb_article_details_79581984]: https://blog.csdn.net/theLostLamb/article/details/79581984