导读:
很早之前接触 CSS
的时候就和浮动打过交道,不过当时只是简单的认识了一下,而今在布局的时候再次遇到,所以在此来对浮动的相关内容进行总结一下,以便更好的理解浮动。
基本概念
定位的基本思想很简单,它允许你定义元素框相对于其正常位置应该出现的位置。CSS
为定位和浮动提供了一些属性,利用这些属性,可以建立各种布局,其包含的三种布局格式::
- 标准文档流:元素排版布局过程中,元素会自动从左往右,从上往下的流式排列。
- 浮动流:浮动流是一种"半脱离标准流"的排版方式,就是水平排版. 它只能设置某个元素左对齐或者右对齐。
- 定位流:定位流也是脱离标准流的一种模式。它完全脱离标准流,包括
absolute
和fixed
。
CSS 浮动:浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样。
标准文档流:
NO0
NO1
NO2
对 NO0
添加了向右的浮动,它脱离文档流并且向右移动,直到它的右边缘碰到包含框的右边缘:
NO0
NO1
NO2
对 NO0
添加了向左的浮动,它脱离文档流并且向左移动,直到它的左边缘碰到包含框的左边缘,由下图可见其脱离了正常的文档流,并浮动在其上(此处覆盖了 NO1):
NO0
NO1
NO2
如果把所有三个块都向右移动,那么 NO0
向右浮动直到碰到包含框,另外两个依次向右浮动直到碰到前一个浮动框。
NO0
NO1
NO2
如果包含框太窄,无法容纳水平排列的三个浮动元素,那么其它浮动块向下移动,直到有足够的空间:
NO0
NO1
NO2
如果浮动元素的高度不同,那么当它们向下移动时可能被其它浮动元素“卡住”(NO2 被 NO0 卡住):
NO0
NO1
NO2
浮动元素之前的元素不会受到影响,之后的元素将围绕它,因为浮动框旁边的行框被缩短,从而给浮动框留出空间。所以如果图像是右浮动,下面的文本流将环绕在它左边:
图
something text something text something text something text something text something text something text
总结
- 浮动有4个属性:left(左浮动)、right(右浮动)、none(不浮动)、inherit(继承)。
- 浮动的框可以向左或向右移动,直到它的外边界接触到包含块(其最近的块级祖先元素)的内边界『另一个浮动元素的外边界。
- 浮动元素脱离了标准文档流,文字和行级元素会围绕该元素。
- 浮动元素的margin(外边距)不会与其他元素的margin合并,所以是边界折叠的一种解决方法。
写在最后
浮动的基本内容就写到这里,总结记录一下,加强记忆,也方便查阅。更多内容点击查看 CSS 清除浮动的几种方法。
如果文中有什么错误,欢迎大家指正,愿与大家在交流之中共同进步,愈激烈,愈深刻。感谢。