浮动,简而言之的意思就是说,元素脱离文档流的控制,自己漂浮在文档流之上
div----块级元素,在页面中独占一行,排列方式为上下排列
从上可以看出,“a1”的宽度很小,在一个网页中,a2完全可以放到a1后面,但是图中并没有这样排列,因此得出,块元素是独占一行的,这就是标准流。
那么 要如何让多个div(块级元素)在同一行显示呢,这便要用到 浮动了。
浮动:float
float:left; 左浮动 float:right;右浮动
简单理解就是漂浮起来向页面的左边和右边排列,浮在文档流之上
当给a3设置了浮动
从下图可以看出,a4往上移动了,a3浮在了a4上面,这就是浮动
此时,再给a4一个左浮动,a4就会脱离标准流,自动上移,横向排在a3的右边
但是,如果这时给a2一个浮动
我们会发现a2浮动后并没有跑到a1的后边,还是在原位置,只是漂浮了起来,因此,浮动的一个重要结论就是:
浮动元素B的上一个元素A如果也是浮动,那么元素B便会紧跟A横向排列,但是如果元素A没有添加浮动,那么有浮动属性的B便会保持和上一个元素 上下排列的方式