星空网 > 软件开发 > 网页设计

随笔之——浮动(float)的影响及其清除、、clear与overflow

一、浮动(float)对内联元素的影响。

1.我们都知道,内联元素(例如:span/img/input...)在正常情况下不可以对其设置宽高的,它的大小之只和它内部内容的多少有关。

我们怎样才可以对其设置宽、高呢?可以用display:block;或者display:inline-block;让它转换成为块元素之后再对其设置宽、高。

2.当我们对内联元素float之后,也可以对内联元素设置宽、高。

》》》》》》举个栗子》》》》》》》

随笔之——浮动(float)的影响及其清除、、clear与overflow

但是对span浮动了之后,就发生了质的变化!附图:如下:

随笔之——浮动(float)的影响及其清除、、clear与overflow

 

 

注:不仅对span有效,其它内联元素也可用!

二、怎样消除float对其它元素的影响呢?

1.我们通常用clear:both;  clear:left;  clear:right;  对其进行消除影响。

在写css样式的时候,我们通常不对其父元素设置高度(height),因为父元素的高度会随着内容的多少而被“撑大”。

但是、当我们对其子元素浮动过后,父元素的高(height)就会受float的影响!》》》》》如下图:

 

 

 

随笔之——浮动(float)的影响及其清除、、clear与overflow

 

但是对其父元素加上overflow-hidden之后,父元素的height就会发生变化!!!》》》》》附图:如下:

随笔之——浮动(float)的影响及其清除、、clear与overflow

 

 

可以看出,父元素的height明显被撑大了,这也消除了span的float对其它盒子的影响!

》》》》》》附图:如下:》》》》》》

随笔之——浮动(float)的影响及其清除、、clear与overflow

 

随笔之——浮动(float)的影响及其清除、、clear与overflow

 

三、如果用clear:  ; 消除浮动(float)的影响时,会影响margin的值、、但用overflow:hidden;

则不会影响其margin值得大小!!!

》》》》》如附图:》》》》》》

随笔之——浮动(float)的影响及其清除、、clear与overflow

 

随笔之——浮动(float)的影响及其清除、、clear与overflow

clear为什么会影响margin值得呢?那是因为margin是参照离他近的那个盒子进行补白的,

但是用clear清除,span的父元素div,并没有height。所以第二个div,还是参照第一个div进行margin补白的。

(意义上,第二个div只认为第一个div离得最近。他们是同级的。)

clear虽然有效的清除了float的影响,但是却影响了margin值的大小(只是表面上影响了margin的值)。

 




原标题:随笔之——浮动(float)的影响及其清除、、clear与overflow

关键词:

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流