[js]02css基础-清除浮动

程序员文章站 2022-03-29 20:00:05

...

浮动的特点

1,浮动的元素”脱标”
证据1:
[js]02css基础-清除浮动

证据2:浮动后的元素不区分行内或者块级元素了
一个span标签不需要转成块级元素，就能够设置宽度、高度了。所以能够证明一件事儿，就是所有标签已经不区分行内、块了。也就是说，一旦一个元素浮动了，那么，将能够并排了，并且能够设置宽高了。无论它原来是个div还是个span。

span{
    float: left;
    width: 200px;
    height: 200px;
    background-color: orange;
}

2.浮动的元素相互”贴靠”
[js]02css基础-清除浮动

3.浮动的元素有“字围”效果

<div>
    <img src="images/1.jpg" alt="" />
</div>
<p>123文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字

让div浮动，p不浮动：
[js]02css基础-清除浮动

4.收缩
一个浮动的元素,如果没有设置width,那么自动收缩为文字的宽度.(类似行内快)
[js]02css基础-清除浮动

浮动使得祖先的高度没了

[js]02css基础-清除浮动

清除浮动1: 给浮动的元素的祖先加高度

如果一个元素要浮动，那么它的祖先元素一定要有高度。高度的盒子，才能关住浮动。
[js]02css基础-清除浮动

只要浮动在一个有高度的盒子中，那么这个浮动就不会影响后面的浮动元素。所以就是清除浮动带来的影响了。

[js]02css基础-清除浮动

网页制作中，高度height很少出现。为什么？因为能被内容撑高！那也就是说，刚才我们讲解的方法1，工作中用的很少。

清除浮动方法2：clear:both;

<div>
    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JS</li>
        <li>HTML5</li>
        <li>设计模式</li>
    </ul>
</div>

<div class="box2">  → 这个div写一个clear:both;属性 
    <ul>
        <li>学习方法</li>
        <li>英语水平</li>
        <li>面试技巧</li>
    </ul>
</div>

这种方法有一个非常大的、致命的问题，margin失效了。
[js]02css基础-清除浮动

清除浮动方法3：隔墙法

[js]02css基础-清除浮动

演化出的内墙法:
[js]02css基础-清除浮动


<div>
    <p></p>
    <p></p>
    <p></p>
    <div class="cl h10"></div>
</div>

<div>
    <p></p>
    <p></p>
    <p></p>
</div>

清除浮动方法4：overflow:hidden;

overflow就是“溢出”的意思， hidden就是“隐藏”的意思。

overflow:hidden;

表示“溢出隐藏”。所有溢出边框的内容，都要隐藏掉。
[js]02css基础-清除浮动

本意就是清除溢出到盒子外面的文字。但是，前端开发工程师又发现了，它能做偏方。

一个父亲不能被自己浮动的儿子，撑出高度。但是，只要给父亲加上overflow:hidden; 那么，父亲就能被儿子撑出高了。这是一个偏方。
[js]02css基础-清除浮动

<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 400px;
            overflow: hidden;
            border: 10px solid black;
        }
        .p1{
            float: left;
            width: 100px;
            height: 150px;
            background-color: red;
        }
        .p2{
            float: left;
            width: 100px;
            height: 380px;
            background-color: yellow;
        }
        .p3{
            float: left;
            width: 100px;
            height: 120px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div>
        <p class="p1"></p>
        <p class="p2"></p>
        <p class="p3"></p>
    </div>
</body>

完整code:

<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style type="text/css">
        *{
            margin: 0;
            padding:0;
        }
        li{
            float: left;
            width: 120px;
            height: 40px;
            background-color: orange;
            text-align: center;
        }
        .box1{
            overflow: hidden;
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
    <div class="box1">
        <ul>
            <li>HTML</li>
            <li>CSS</li>
            <li>JS</li>
            <li>HTML5</li>
            <li>设计模式</li>
        </ul>
    </div>

    <div class="box2">
        <ul>
            <li>学习方法</li>
            <li>英语水平</li>
            <li>面试技巧</li>
        </ul>
    </div>
</body>
</html>

overflow例子:

[js]02css基础-清除浮动

<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .news{
            width: 400px;
            height: 100px;
            border: 1px solid #000;
            margin: 100px;
            overflow: hidden;
        }
        .news ul{
            list-style: none;
        }
        .news ul li{
            overflow: hidden;
            _zoom:1;
            border-bottom: 1px dashed gray;
        }
        .news ul li span.title{
            float: left;
        }
        .news ul li span.date{
            float: right;
        }
    </style>
</head>
<body>
    <div class="news">
        <ul>
            <li>
                <span class="title">哈哈哈哈哈哈哈哈</span>
                <span class="date">2015年10月24日</span>
            </li>
            <li>
                <span class="title">嘻嘻嘻嘻嘻</span>
                <span class="date">2015年10月24日</span>
            </li>
            <li>
                <span class="title">呜呜呜呜呜呜呜</span>
                <span class="date">2015年10月24日</span>
            </li>
        </ul>
    </div>
</body>

清除浮动小结

1）加高法：
浮动的元素，只能被有高度的盒子关住。也就是说，如果盒子内部有浮动，这个盒子有高，那么妥妥的，浮动不会互相影响。但是，工作上，我们绝对不会给所有的盒子加高度，这是因为麻烦，并且不能适应页面的快速变化。

<div>   → 设置height
    <p></p>
    <p></p>
    <p></p>
</div>

<div>   → 设置height
    <p></p>
    <p></p>
    <p></p>
</div>

2) clear:both;法
最简单的清除浮动的方法，就是给盒子增加clear:both；表示自己的内部元素，不受其他盒子的影响。

<div>
    <p></p>
    <p></p>
    <p></p>
</div>

<div>   → clear:both;
    <p></p>
    <p></p>
    <p></p>
</div>

浮动确实被清除了，不会互相影响了。但是有一个问题，就是margin失效。两个div之间，没有任何的间隙了。
3）隔墙法：
在两部分浮动元素中间，建一个墙。隔开两部分浮动，让后面的浮动元素，不去追前面的浮动元素。
墙用自己的身体当做了间隙。

<div>
    <p></p>
    <p></p>
    <p></p>
</div>

<div class="cl h10"></div>

<div>
    <p></p>
    <p></p>
    <p></p>
</div>

我们发现，隔墙法好用，但是第一个div，还是没有高度。如果我们现在想让第一个div，自动的根据自己的儿子，撑出高度，我们就要想一些“小伎俩”，“奇淫技巧”。
内墙法：

<div>
    <p></p>
    <p></p>
    <p></p>
    <div class="cl h10"></div>
</div>

<div>
    <p></p>
    <p></p>
    <p></p>
</div>

内墙法的优点就是，不仅仅能够让后部分的p不去追前部分的p了，并且能把第一个div撑出高度。这样，这个div的背景、边框就能够根据p的高度来撑开了。

4）overflow:hidden;
这个属性的本意，就是将所有溢出盒子的内容，隐藏掉。但是，我们发现这个东西能够用于浮动的清除。
我们知道，一个父亲，不能被自己浮动的儿子撑出高度，但是，如果这个父亲加上了overflow:hidden；那么这个父亲就能够被浮动的儿子撑出高度了。这个现象，不能解释，就是浏览器的小偏方。
并且,overflow:hidden;能够让margin生效。

网页布局:
[js]02css基础-清除浮动