未登录
登 录
×
<返回上一级
css清除浮动
css

css设计浮动属性的主要目的,是为了实现文本绕排图片的效果。

一.浮动

当浮动一张图片或者其他元素时,浏览器会将浮动元素往上方推,直到它碰到父元素的内边界。后面的元素不再认为浮动元素在文档流中位于它的前面了,因为它就会占据父元素左上角的位置。

值得说明的是:css在呈现元素的时候都要将元素生成矩形盒子,这个矩形盒子实际上分为内容和边框组成的上 半部分,以及背景颜色和背景图片组成的下半部分,浮动只是浮动起半层,所以从浏览器中看到文本会绕开浮动的图片。

二.清除浮动之围住浮动元素的三种方法

例如html:

    <section>
        <img src="images/travel2.jpg" alt="">
        <p>浮动很有趣</p>
    </section>
    <footer>这里是底部的元素,存放一些文字。</footer>

css:

        section{border:1px solid blue;margin:0 0 10px 0;}
        p{margin:0;}
        footer{border: 1px solid red;}    

 得到如图:

当给图片添加做浮动后:

产生上面效果的原因是:图片浮动之后,section就不再包围浮动元素了,它只包围非浮动元素。所以footer元素被提上来。然而这并不是我们想要的效果,解决办法如下:

方法一:为父元素添加overflow:hidden;

说明:overflow:hidden声明的真正用途是防止包含元素被超大的内容撑大。应用overflow:hidden之后,包含元素依然保持其设定的宽度,而超大的自内容会被容器剪切掉。这里是它的另一个作用,即它能可靠的迫使父元素包含其浮动的子元素。

方法二:同时浮动父元素

section{border:1px solid blue;margin:0 0 10px 0;float: left;width: 100%;}
p{margin:0;}
footer{border: 1px solid red;clear: both;}
img{float: left;}

浮动section之后,不管其子元素是否浮动,它都会紧紧地包围住它的子元素。这里父元素宽度设置为100%;如果不设置,p还是会在图片下边。

方法三:添加非浮动的清除元素

    <section>
        <img src="images/travel2.jpg" alt="">
        <p>浮动很有趣</p>
        <div style="clear: both;"></div>
    </section>
    <footer>这里是底部的元素,存放一些文字。</footer>