css浮动考点

野生纯情的小狮子
845 阅读5分钟

一、面试题型

面试考点有两种：

1、页面效果，考察对浮动的理解。

2、清除浮动的方法。

例1：下面程序的效果图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #p1{
            width:50px;
            height:50px;
            float: left;
            background-color: red;
        }
        #p2{
            width:100px;
            height:50px;
            background-color: green;
        }
    </style>
</head>
<body>
<p id="p1"></p>
<p id="p2">test</p>

</body>
</html>

效果图：


例2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #p1{
            width:50px;
            height:50px;
            float: left;
            background-color: red;
        }
        #p2{
            width:100px;
            height:50px;
            background-color: green;
        }
    </style>
</head>
<body>
<div id="p1"></div>
<div id="p2">test</div>

</body>
</html>

效果图：


之所以呈现出这种效果是因为浮动元素会脱离文档流，块级元素表现的像浮动框不存在一样，而文字会围绕在浮动元素旁边。

疑问：为什么p标签和div呈现出来的效果稍有不同?

原因：p标签默认存在margin值，将p的margin设为0即可解决。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #p1{
            width:50px;
            height:50px;
            float: left;
            background-color: red;
            margin: 0;
        }
        #p2{
            width:100px;
            height:50px;
            background-color: green;
        }
    </style>
</head>
<body>
<p id="p1"></p>
<p id="p2">test</p>

</body>
</html>

效果图


二、什么是浮动？

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框脱离文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

三、浮动的特点

脱标：脱离标准文档流。

贴边：左浮动时，元素向左移动，直到它的左边贴到包含块的左边缘。

字围：文字会围着浮动元素排开。

收缩：块级元素设置浮动后，其宽度不再占满一行，而是收缩为包含内部元素的宽度即可。

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #div1{
            width:50px;
            height:50px;
            float: left;
            background-color: red;
        }
        #div2,#div3{
            width:50px;
            height:50px;
            background-color: green;
        }
    </style>
</head>
<body>
<div id="div1"></div>
<div id="div2">test</div>
<div id="div3">test</div>

</body>
</html>

当#div2,#div3的 width:50px;时，div2实际上是被div1浮动完全遮盖住了，由于设置了宽度，文字又必须围绕浮动元素，所以文字跑到下面去了。


当#div2,#div3的 width:100px;时，div2实际上是被div1浮动遮盖了一半，由于宽度够放文字，文字围绕浮动元素，所以文字在其右面。


当#div2,#div3不设置宽度时，效果如下：


例2：解释收缩

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #div1{
            float: left;
            background-color: red;
        }
        #div2,#div3{
            width:50px;
            height:50px;
            background-color: green;
        }
    </style>
</head>
<body>
<div id="div1">我是浮动元素</div>
</body>
</html>

效果：


四、浮动的缺点

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #div1,#div2,#div3{
            width:50px;
            height:50px;
            float: left;
        }
        #div1{
            background-color: red;
        }
        #div2{
            background-color: green;
        }
        #div3{
            background-color: #00A0E9;
        }
        #parent{
            border: 5px solid #000;
            width: 150px;
        }
    </style>
</head>
<body>
<div id="parent">
    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>
</div>


</body>
</html>

效果：


本想让父容器包裹着三个浮动元素，但是浮动带来副作用----父容器高度塌陷，于是清理浮动就显着至关重要。

五、清除浮动

清除浮动不是不用浮动，清除浮动产生的父容器高度塌陷。

法一、给浮动元素的父元素添加高度（扩展性不好）

例：

#parent{
    border: 5px solid #000;
    width: 150px;
    height: 50px;
}


如果一个元素要浮动，那么它的父元素一定要有高度。有高度的盒子，才能关住浮动。可以通过直接给父元素设置height，实际应用中我们不大可能给所有的盒子加高度，不仅麻烦，并且不能适应页面的快速变化；另外一种，父容器的高度可以通过内容撑开（比如img图片），实际当中此方法用的比较多。

法二、clear：both；

在最后一个子元素的后面添加一个块级元素，然后将其设置clear:both,这样就可以清除浮动。

例：

<div id="parent">
    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>
    <br id="wrap"/>
</div>
#wrap{
    clear: both;
}


法三、伪元素清除浮动   推荐使用

上面那种办法固然可以清除浮动，但是我们不想在页面中添加这些没有意义的冗余元素，此时如何清除浮动吗？ 结合 :after 伪元素和 IEhack ，可以完美兼容当前主流的各大浏览器，这里的 IEhack 指的是触发 hasLayout。

#parent{
    *zoom:1;   //触发haslayout
}
#parent:after{
    content:'';
    display:block;
    clear: both;

}

注意：上面的代码为必须有的。


法四、触发形成BFC

这种方案让父容器形成了BFC（块级格式上下文），而BFC可以包含浮动，通常用来解决浮动父元素高度坍塌的问题。

BFC的触发方式

我们可以给父元素添加以下属性来触发BFC：

  • float 为 left | right

  • overflow 为 hidden | auto | scorll

  • display 为 table-cell | table-caption | inline-block

  • position 为 absolute | fixed

可以给父元素设置overflow:auto，但是为了兼容IE最好使用overflow:hidden。

例：

#parent{
    overflow: hidden;
}


但这种办法有个缺陷：如果有内容出了盒子，用这种方法就会把多的部分裁切掉，所以这时候不能使用。

总结：清除浮动的方法







avatar
文章
阅读
粉丝