揭开浮动布局的秘密(简略版)

Posted hu.Hakim

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了揭开浮动布局的秘密(简略版)相关的知识,希望对你有一定的参考价值。

  正常情况下,页面中的块级元素(block)就好像一个个沉在水中的铁块,如果我们将铁块换成木块呢?显然它们会飘起来,浮在水面上,如图所示:

 

1、浮动导致的布局变动

  这里使用浮动(float)这个词语实在是非常形象。当然,这里的浮动和现实中的浮动并非完全吻合。

   float的4个可选项:none 、left、right、inherit。其中none为默认值,既不浮动,inherit表示继承父元素的float值。而left、right则很好理解,一个是向页面的左侧浮动,一个向右浮动。

(1)对于块级元素来说,在不设置宽度的情况下,默认的宽度是100%,一旦设置了浮动,它的宽度就会根据内容进行自动调整。

(2)设置了浮动的元素会脱离正常的文档流,我们可以这样理解:设置浮动后,元素不仅在y轴上浮动了起来,在z轴上,也浮动了起来。

(3)虽然浮动的元素脱离了文档流,但是里面的内容仍然占据空间,会根据相对位置进行布局。

 

2、清除浮动

  清除浮动主要应用的是CSS的clear属性,clear属性定义了元素的哪一侧不允许出现浮动元素。可选项有left、right、both。

  例:

    

 1     html body div.chear,
 2     html body span.clear{
 3     background:none;    
 4     border: 0;
 5     chear:both;
 6     display: block;
 7     float: none;
 8     font-size: 0;
 9     margin: 0;
10     padding: 0;
11     overflow: hidden;
12     visibility: hidden;
13     width: 0;
14     height: 0;
15 }

 

 

 

 

 

没有备注转载的文章都来自原创。转载需备注来源~

以上是关于揭开浮动布局的秘密(简略版)的主要内容,如果未能解决你的问题,请参考以下文章

揭开黑客是如何秘密挖掘加密货币?

揭开Google暴利秘密的数学公式

揭开央行数字货币与区块链的秘密

赢钱秘笈独家揭开神经网络算法连中500万大奖的秘密!

揭开单向TVS管和双向TVS管背后的秘密?

揭开电脑上登录多个微信的秘密