本文共 800 字，大约阅读时间需要 2 分钟。

unpredictable 捉摸不透的

css box model

all right, let’s move on!

border

border: 1px solid red;

padding

padding-top

padding-right
padding-bottom
paddign-left

margin

margin-top
margin-right
margin-bottom
margin-left

问题

什么是css中的float？
什么时候需要使用float?
如何判断网页中是否使用了float?
什么是css中的display布局？
float和display有什么区别？

这些问题的答案都在下面

float

学术定义：float CSS属性指定一个元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它。

使用float的最主要的目的就是构造一种文本环绕着图片的效果。

当一个元素浮动之后，它会被移出正常的文档流，然后向左或者向右平移，一直平移直到碰到了所处的容器的边框，或者碰到另外一个浮动的元素。
https://marksheet.io/css-float-clear.html

float可能是最不容易理解的一个css属性了，比如color属性代表颜色，这非常容易理解和记忆，但是float就没有这么直观了。不过幸运的是float一共就三个值，再难也不会难到哪里去，实在不行你就一个一个值来实验。

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

1.没有使用float的情况

可以看到，在没有使用float的时候，我的页面就是从上网页的正常文档流

2.使用float: left;

3.使用float:right;

display

display:none
display: block
display: inline-block