作者:100斤的重口味_866 | 来源:互联网 | 2023-02-10 15:58
在学完css中浮动的效果后还是有一点蒙,为了更好的认识及使用浮动,现在整理一下思路。浮动,最初是用来实现文字环绕图片的效果,所以如果将某一个元素打上浮动标签,其后面紧跟的一个元素就会紧跟浮动
在学完css中浮动的效果后还是有一点蒙,为了更好的认识及使用浮动,现在整理一下思路。
浮动,最初是用来实现文字环绕图片的效果,所以如果将某一个元素打上浮动标签,其后面紧跟的一个元素就会紧跟浮动形成环绕效果。为了实现这种效果,就使得浮动具有两个特性:包裹与破坏。包裹是指不论元素以前具有什么属性,在float化之后,元素会具有block属性,即其具有了块状元素的特点,可以不受外部元素的影响,并自成一行。但又因为其具有破坏性,使得父元素高度塌陷,随之而来的就是后一个标签不论是什么属性的元素都会环绕其表现。如下代码:
<div class="left">div>
<div class="right">在学完css中浮动的效果后还是有一点蒙,为了更好的认识及使用浮动,现在整理一下思路。
浮动,最初是用来实现文字环绕图片的效果,所以如果将某一个元素打上浮动标签,其后面紧跟的一个元素就会紧跟浮动形成环绕效果。为了实现这种效果,就使得浮动具有两个特性:包裹与破坏。包裹是指不论元素以前具有什么属性,在float化之后,元素会具有block属性,即其具有了块状元素的特点,可以不受外部元素的影响,并自成一行。但又因为其具有破坏性,使得父元素高度塌陷,随之而来的就是后一个标签不论是什么属性的元素都会环绕其表现。
div>
<style> .left{width:200px;height:10px;background:#0033FF;float:left;} .right{background:#CCCCCC;} style>
这样实现的效果为
![这里写图片描述](https://img1.php1.cn/3cd4a/24e5b/cd5/87368f8c645f1b96.jpeg)
可以看到,当下一个标签中的内容多于前一个时,会自动环绕在其四周。这样就带来新的问题:如何清除浮动带来的影响。
在清除其下一级的环绕效果时,可采用clear实现,如上例,前一级是左浮,则可用clear:left,当然也可以用clear:both。
.right{background:#CCCCCC;clear:left;}
效果为:
但是,当浮动外还有一层div时,并且其内元素均为浮动时,clear就不能发挥作用了。如果在上面例子中加一个外标签将left和right包裹起来,再设置border我们会发现其仍有高度:
![这里写图片描述](https://img1.php1.cn/3cd4a/24e5b/cd5/dafcec64ca227012.jpeg)
<div id="wrap">
<div class="left">div>
<div class="right">在学完css中浮动的效果后还是有一点蒙,为了更好的认识及使用浮动,现在整理一下思路。
浮动,最初是用来实现文字环绕图片的效果,所以如果将某一个元素打上浮动标签,其后面紧跟的一个元素就会紧跟浮动形成环绕效果。为了实现这种效果,就使得浮动具有两个特性:包裹与破坏。包裹是指不论元素以前具有什么属性,在float化之后,元素会具有block属性,即其具有了块状元素的特点,可以不受外部元素的影响,并自成一行。但又因为其具有破坏性,使得父元素高度塌陷,随之而来的就是后一个标签不论是什么属性的元素都会环绕其表现。
div>
div>
#wrap{border:4px solid #33FF66;}
这是因为right部分并没有设置浮动,其文字具有的高度撑开了父元素的高度,现在将right也设置为浮动。
<style> #wrap{border:4px solid #33FF66;clear:both;} .left{float:left;width:200px;height:10px;background:#0033FF;} .right{background:#CCCCCC;float:left;width:1300px;} style>
(浮动元素最好设置宽度,像上例,没有设置 宽度时,不会产生浮动效果,具体原因我也还没发现)设置宽度和浮动,再设置父层clear:both后效果为
![这里写图片描述](https://img1.php1.cn/3cd4a/24e5b/cd5/949699c6ff70149f.jpeg)
可以发现父元素并没有被撑开,我所常用的一种方法是:设置父层overflow:hidden
#wrap{border:4px solid #33FF66;overflow:hidden;}
可以看见父元素高度塌陷问题解决。但由于浏览器的不同,overflow:hidden不一定能在所有浏览器上起作用,可以配合zoom:1使用。
浮动还会忽略margin值,主要原因在于float脱离了标准文档流但又没有absolute脱离的彻底,当元素浮动后,其后的内容会环绕其显示,但margin值并不是从浮动元素的边缘开始计算的,而是根据上一级标签的范围边界开始算的,就导致写了margin值还是紧贴浮动元素,只要设置margin值够大,比如等于浮动元素宽度加一小段距离就能显示了。比较方便的是,浮动对padding值敏感,可用padding代替margin。
对于浮动实现两列三列布局,可将块中分成两到三个块,分别浮动,padding设距离,注意浮动设置宽度,父元素overflow。
但由于浮动在ie6,ie7中会带来一些奇怪的问题,比如在7中会出现clear的包裹范围问题,最后两个浮动元素的垂直间距问题,阶梯问题还有右浮不会在同一行显示问题,所以浮动要慎用,一旦排版发生变化,很可能出现错位现象。