css浮动考点

时间 2019-12-05

标签 css 浮动栏目 CSS 繁體版

原文原文链接

1、面试题型

面试考点有两种：html

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

二、清除浮动的方法。浏览器

例1：下面程序的效果图bash

<!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>复制代码

效果图：ui

例2spa

<!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>复制代码

效果图：3d

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

疑问：为何p标签和div呈现出来的效果稍有不一样?cdn

缘由：p标签默认存在margin值，将p的margin设为0便可解决。htm

<!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>复制代码

效果图

2、什么是浮动？

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

3、浮动的特色

脱标：脱离标准文档流。

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

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

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

例：

<!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>复制代码

效果：

4、浮动的缺点

例：

<!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>复制代码

效果：

本想让父容器包裹着三个浮动元素，可是浮动带来反作用----父容器高度塌陷，因而清理浮动就显着相当重要。

5、清除浮动

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

法1、给浮动元素的父元素添加高度（扩展性很差）

例：

#parent{
    border: 5px solid #000;
    width: 150px;
    height: 50px;
}复制代码

若是一个元素要浮动，那么它的父元素必定要有高度。有高度的盒子，才能关住浮动。能够经过直接给父元素设置height，实际应用中咱们不大可能给全部的盒子加高度，不只麻烦，而且不能适应页面的快速变化；另一种，父容器的高度能够经过内容撑开（好比img图片），实际当中此方法用的比较多。

法2、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;
}复制代码

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

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

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

}复制代码

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

法4、触发造成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;
}复制代码

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

总结：清除浮动的方法