欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

overflow清除浮动的真正原因及其他清除浮动的方式

程序员文章站 2024-01-29 12:37:52
...

转至http://www.cnblogs.com/ZengYunChun/p/7068786.html

一:overflow:hidden清除浮动

1. 先上一段代码清楚浮动的代码, 外层ul设置overflow为hidden, 内层li设置float为left左浮动

overflow清除浮动的真正原因及其他清除浮动的方式
 1 <!DOCTYPE html>
 2 <html>
 3 <style>
 4     * {
 5         margin: 0;
 6         padding: 0;
 7     }
 8     ul {
 9         list-style-type: none;
10         overflow: hidden;
11         background-color: #333;
12     }
13     li {
14         float: left;
15     }
16     li a {
17         display: block;
18         color: red;
19         text-align: center;
20         padding: 14px 16px;
21         text-decoration: none;
22     }
23 </style>
24 <meta charset="utf-8">
25 <body>
26     <ul>
27         <li><a class="active" href="#home">Home</a></li>
28         <li><a href="#news">News</a></li>
29         <li><a href="#contact">Contact</a></li>
30         <li><a href="#about">About</a></li>
31     </ul>
32 </body>
33 </html>
overflow清除浮动的真正原因及其他清除浮动的方式

 

2.出现如下显示, 宽度为浏览器宽度

overflow清除浮动的真正原因及其他清除浮动的方式

3. 去掉overflow: hidden后, 可以看到

overflow清除浮动的真正原因及其他清除浮动的方式(尾巴在这儿)

4. 为什么去掉ul去掉overflow: hidden之后没在了, 其实不是没在了, 看到由于没有设置高度, height: auto为自动值, 就是根据里面的内容自动设置高度, 但是li设置了左浮动, 已经浮动起来了属于浮动流, 不在普通流中, 但是ul还是在普通流, 他普通流中的内容为空, 所以没有高度.

overflow清除浮动的真正原因及其他清除浮动的方式

 5. 做个实验, 去掉ul的overflow: hidden后, 在里面加入一个普通流的<span>, 可以看到下面效果, ul的高度就是span撑起来的高度

overflow清除浮动的真正原因及其他清除浮动的方式
1     <ul>
2         <span style="color:white">我是普通流</span>
3         <li><a class="active" href="#home">Home</a></li>
4         <li><a href="#news">News</a></li>
5         <li><a href="#contact">Contact</a></li>
6         <li><a href="#about">About</a></li>
7     </ul>
overflow清除浮动的真正原因及其他清除浮动的方式

 overflow清除浮动的真正原因及其他清除浮动的方式

6. 绕了一圈, 回到正题, 首先说下overflow的意思: 属性规定当内容溢出元素框时发生的事情, w3school解释如下, 简单的说hidden 的意思是超出的部分要裁切隐藏掉

overflow清除浮动的真正原因及其他清除浮动的方式

7. 那么如果 float 的元素li不占普通流位置,

 普通流的包含块ul设置了overflow: hidden要根据内容高度裁切隐藏, 

 并且ul高度是默认值auto, 那么不计算其内浮动元素高度就裁切就有可能会裁掉float的li

   这是反布局常识的

 所以如果没有明确设定容器ul高情况下

 它要计算内容全部高度才能确定在什么位置hidden

 浮动流的高度就要被计算进去, 就是li的高度, 

 一计算进去就顺带达成了清理浮动的目标

二:伪元素清除浮动:

    1:利用伪元素:html元素::after也可以进行清除浮动,但是记住要让伪元素为块级元素才能清除浮动,不然的话行内元素是没有办法清除浮动的

实例:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
    <script src="main.js"></script>
    <style>
         .box::after{
             /*
             伪元素设置为块元素才能清除浮动
             */
             display: block;
             clear: both;
  
             content: "";
         }
         .l,.r{
             width: 200px;
             height: 200px;
             float: left;
         }
         .l{
             background: red;

         }
         .r{
             background: blue;
             
         }
         .d{
             width: 400px;
             height: 400px;
             background:green;
         }
         
    </style>
</head>
    <body>
        <!--
            清除浮动的overflow方式
            <div class="box">
            <div class="l"></div>
            <div class="r"></div>
        </div>        
        <div class="d">

        </div> -->
        <!--
            清除浮动的第二种方式伪元素清除浮动
        -->
        <div class="box">
            <div class="l">

            </div>
            <div class="r">

            </div>
        </div>
        <div class="d">

        </div>
    </body>
</html>
三:利用<div class="clear"></div>  .clear{ clear:both}清除浮动

1:示例:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
    <script src="main.js"></script>
    <style>
         .clear{
             /*
             clear清除左右浮动
             */
             clear:both;
         }
         .l,.r{
             width: 200px;
             height: 200px;
             float: left;
         }
         .l{
             background: red;

         }
         .r{
             background: blue;
             
         }
         .d{
             width: 400px;
             height: 400px;
             background:green;
         }
         
    </style>
</head>
    <body>
        <!--
            清除浮动的overflow方式
            <div class="box">
            <div class="l"></div>
            <div class="r"></div>
        </div>        
        <div class="d">

        </div> -->
        <!--
            清除浮动的第三种方式div clear清除浮动
        -->
            <div class="l">

            </div>
            <div class="r">

            </div>
        <div class="clear">

        </div>
    </body>
</html>