本文介绍了浮动(float)在HTML布局中的作用，通过实例展示了如何使用float:left和float:right使多个div在同一行显示。内容包括块级元素的标准流特性，以及浮动元素如何影响周围元素的排列。文章还探讨了浮动元素之间的相互影响，强调了当一个元素浮动后，如果其前一个元素也浮动，两者会横向排列的规律。
浮动，简而言之的意思就是说，元素脱离文档流的控制，自己漂浮在文档流之上
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便会保持和上一个元素 上下排列的方式
扫一扫
198
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
