首页 > 代码库 > (学习随笔)关于浮动元素换行机制的小测试

(学习随笔)关于浮动元素换行机制的小测试

引言:

之前看了一篇张鑫旭老师的博文《关于文字内容溢出用点点点(…)省略号表示》。其中的他的“margin负值定位法”原理中的“当文字内容足够长时就把隐藏在上面的省略号层给挤下来了。”着实研究了好久,才发现自己在浮动换行机制这方面的欠缺,同时又发现网上对这一机制并没有非常深入探讨的文章,所以自己来做个小测试研究下:)

 

正文:

在W3School里CSS教学中关于浮动的说明里,对于浮动元素的换行,说法只有一句"浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。",非常不明确。到底是碰到了边缘以后是换行呢?还是紧挨在一起呢?

乱想不如实践!

 

创建两个div,以及一个他们的包含块div:

 

1 <div id="container">
2             <div id="a"></div>
3             <div id="b"></div>
4 </div>

 

 

然后给他们添加上一些预备的样式

 1             div{
 2                 margin: 0;
 3                 padding: 0;
 4             }
 5             #container{
 6                 margin: 150px;
 7                 width: 400px;
 8                 height: 200px;
 9                 background-color: black;
10                 
11             }
12             #a{
13                 background-color: green;
14                 width: 100px;
15                 height: 200px;
16                 float: left;
17              
18             }
19             #b{
20                 background-color: blue;
21                 width: 100px;
22                 height: 200px;
23                 float: right;
24                 
25             }

效果:

嗯。。很和谐。。

 

其次将两个div的宽度撑满整个容器,并且都向左浮动

            #a{
                background-color: green;
                width: 200px;
                height: 200px;
                            float: left;
                
                        }
            #b{
                background-color: blue;
                width: 200px;
                height: 200px;
                float: left;
                
            }

效果(边缘紧挨,但没有换行):

 

保持宽度不变,再将两个div分别向左右浮动,以及分别向右浮动

效果都为(边缘紧挨,但没有换行)

 

再将左div(绿)不设为浮动,保持在正常文档流中,右div(蓝)向左浮动

 1             #a{
 2                 background-color: green;
 3                 width: 200px;
 4                 height: 200px;
 5             
 6                 
 7             }
 8             #b{
 9                 background-color: blue;
10                 width: 200px;
11                 height: 200px;
12                 float: left;
13                 
14             }

效果(虽然数值上边缘可以紧贴,但右div仍然在本来的下一行,没有浮动到左div的右边):

以及将左div(绿)不设为浮动,保持在正常文档流中,右div(蓝)向右浮动

效果(虽然数值上边缘可以紧贴,但右div仍然在本来的下一行,没有浮动到左div的右边):

 

进一步,将左div宽度改成更小,使得宽度容下两个div还有余:

 1             #a{
 2                 background-color: green;
 3                 width: 100px;
 4                 height: 200px;                                            
 5             }
 6             #b{
 7                 background-color: blue;
 8                 width: 200px;
 9                 height: 200px;
10                 float: left;                
11             }
12         </style>

效果(下面的div仍旧保持原位):

 

 

小结:

 

在一行里,两个浮动元素的宽度总和正好等于容器宽度,即左右紧挨着时,外边缘一边碰到另一个浮动框的边框另一边碰到容器边框时,浮动元素不会换行

如果情况是,一个浮动元素,另一个为正常文档流中的元素,浮动元素只会在自己存在的一行内左右浮动,不管是否上面有空间上的多余。