CSS——float属性及Clear:both备忘笔记

当前位置 : 首页 > 网页制作 > CSS > CSS——float属性及Clear:both备忘笔记

CSS——float属性及Clear:both备忘笔记

来源: 作者: 时间:2015-11-05 11:49
CSS的float属性,作用就是改变块元素对象的默认显示方式,HTML标签设置了float属性之后,它将不再独自占据一行,从而可以实现多个元素同处一行的效果,所以需要在样式定义的后面进行
CSS的float属性,作用就是改变块元素对象的默认显示方式,HTML标签设置了float属性之后,它将不再独自占据一行,从而可以实现多个元素同处一行的效果,所以需要在样式定义的后面进行清除浮动
通过指定CSS属性float的值,从而使元素向左或向右浮动,然后由后继元素向上移动以填补前面元素的浮动而空出的可用空间。CSS的float属性,作用就是改变块元素对象的默认显示方式,HTML标签设置了float属性之后,它将不再独自占据一行,从而可以实现多个元素同处一行的效果。Float的功能很强大,但是如果没有好好掌握而使用很可能会成为你调试样式的噩梦。

使用Float样式,如果没有清除浮动,那么有浮动元素的父元素容器将无法自动撑开。如果没有清除内部浮动,此时会导致浮动的父元素无法自动撑开到本身应有的高度。也就是说:当一个元素是浮动的,如果没有关闭浮动时,其父元素不会包含这个浮动元素,因为此时浮动元素从文档流中脱离。

所以需要在样式定义的后面进行清除浮动,清除浮动的方法有几种:

Clear:both清除浮动

clear清除浮动主要是借用clear属性来清除浮动,这是一种比较陈旧的清除浮动方法,但是感觉一般遇到这种问题都会用这种方法去清除浮动。使用clear:both来清除浮动,我们需要在需要清除浮动地方的后面紧接着增加一个额外元素,比如说一个div标签,并且定义他们的样式为“clear:both”,其通常使用的结构方式如下:

复制代码
代码如下:

<div class="demo A">
<div class="demoB demoFloat">float left</div>
<div class="demoC demoFloat">float right</div>
<div class="demoD demoFloat">not float</div>
<div class="clear"></div>
</div>


复制代码
代码如下:

<pre name="code" class="css"> .clear {
clear:both;/*主要使用这个属性来清除浮动*/
/*为了不让ie具有一定的空间,个人建议加上下面三个属性*/
height: 0;
line-height: 0;
font-size: 0;
}</pre>
<pre></pre>
<p></p>
<pre></pre>
<p></p>
<h4 style="margin:0px; line-height:30px; color:rgb(81,177,72); font-family:'Microsoft Yahei'"><a name="t1"></a>
<span style="white-space:pre"></span>2.使用overflow</h4>
<p style="margin-top:0px; margin-bottom:9px; color:rgb(64,64,64); font-family:'Microsoft Yahei'; line-height:28px">
<span style="white-space:pre"></span>用overflow方法来清除浮动相对来说比较简单,只需要在有浮动的元素上面加上下面的属性:</p>
<p style="margin-top:0px; margin-bottom:9px; color:rgb(64,64,64); font-family:'Microsoft Yahei'; line-height:28px">
</p><pre name="code" class="css"> .A {
overflow: auto;
zoom: 1;/*在IE下触发其layout,也要以使用_height:1%来代替zoom*/
}</pre><p></p>
<p style="margin-top:0px; margin-bottom:9px; color:rgb(64,64,64); font-family:'Microsoft Yahei'; line-height:28px">
<span style="white-space:pre"></span>使用overflow属性来清除浮动有一点需要注意,overflow属性共有三个属性值:hidden,auto,visible。我们可以使用hiddent和auto值来清除浮动,但切记不能使用visible值,如果使用这个值将无法达到清除浮动效果,其他两个值都可以。</p>
<p style="margin-top:0px; margin-bottom:9px; color:rgb(64,64,64); font-family:'Microsoft Yahei'; line-height:28px">
<span style="white-space:pre"></span>对于overflow属性清滁浮动我们还可以这样应用:</p>
<p style="margin-top:0px; margin-bottom:9px; color:rgb(64,64,64); font-family:'Microsoft Yahei'; line-height:28px">
</p><pre name="code" class="css"> .A {
overflow: auto;/*除IE6以及其以下版本不识别之外,其他浏览器都识别*/
}
* html .A {
height: 1%; /* IE5-6 */
}</pre><p></p>
<h4 style="margin:0px; line-height:30px; color:rgb(81,177,72); font-family:'Microsoft Yahei'"><a name="t2"></a>
<span style="white-space:pre"></span>3.clearfix方法</h4>
<p style="margin-top:0px; margin-bottom:9px; color:rgb(64,64,64); font-family:'Microsoft Yahei'; line-height:28px">
<span style="white-space:pre"></span>这种方法清除浮动是现在网上最拉风的一种清除浮动,是利用:after和:before来在元素内部插入两个元素块,从而达到清除浮动的效果。其实现原理类似于clear:both方法,只是区别在于:clear在html插入一个div.clear标签,而clearfix利用其伪类clear:fix在元素内部增加一个类似于div.clear的效果。下面来看看其具体的使用方法:</p>
<p style="margin-top:0px; margin-bottom:9px; color:rgb(64,64,64); font-family:'Microsoft Yahei'; line-height:28px">
HTML Code:</p>
<p style="margin-top:0px; margin-bottom:9px; color:rgb(64,64,64); font-family:'Microsoft Yahei'; line-height:28px">
</p><pre name="code" class="css"> <div class="demo A clearfix">
<div class="demoB demoFloat">float left</div>
<div class="demoC demoFloat">float right</div>
<div class="demoD demoFloat">not float</div>
</div></pre><p></p>
<p style="margin-top:0px; margin-bottom:9px; color:rgb(64,64,64); font-family:'Microsoft Yahei'; line-height:28px">
<span style="white-space:pre"></span>使用clearfx来清除浮动最主要掌握一点,需要在有浮动元素的父元素中加入一个叫clearfix的class名称,比如说我们这个例子,我们需要在div.A中加入一个clearfix的class名。接着在给这个clearfix加上样式</p>
<p style="margin-top:0px; margin-bottom:9px; color:rgb(64,64,64); font-family:'Microsoft Yahei'; line-height:28px">
</p><pre name="code" class="css"> .clearfix:before,
.clearfix:after {
content: ".";
display: block;
height: 0;
visibility: hidden;
}
.clearfix:after {clear: both;}
.clearfix {zoom: 1;} /* IE < 8 */</pre><p></p>
<p style="margin-top:0px; margin-bottom:9px; color:rgb(64,64,64); font-family:'Microsoft Yahei'; line-height:28px">
<span style="white-space:pre"></span>其实只使用clearfix:after就可以达到清除浮动的效果,但只使用clearfix:after时在跨浏览器兼容问题会存在一个垂直边距叠加的bug,所以为了让浏览器兼容这个clearfix的清除浮动,在原来的基础上加止clearfix:before,这样就解决了跨浏览器的兼容问题。</p>
<p style="margin-top:0px; margin-bottom:9px; font-family:'Microsoft Yahei'; line-height:28px">
<span style="white-space:pre"></span>在这么多种清除浮动的方法中,都没有离开最原始的clear:both方法,特别是clearfix:after清除浮动,完全就是clear:both的一种变身,区别在于不需要在html增加一个标签,而只需要在有浮动元素的父元素中加上一个clearfix的class名,这样就轻松解决了清除浮动的问题。</p>
Tag:
网友评论

<