首页 > 代码库 > 清除浮动

清除浮动

2024-09-08 07:05:34   216人阅读

http://www.cnblogs.com/ForEvErNoME/p/3383539.html，记录学习

25.浮动元素引起的问题：

当容器的高度为auto（没设置），容器的内容中有浮动（float为left或right）的元素，在这种情况下，容器的高度不能自动伸长以适应内容的高度，使得内容溢出到容器外面而影响（甚至破坏）布局。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
    <style>
        .news {
        background-color: gray;
        border: solid 1px black;
        }

        .news img {
        float: left;
        }

        .news p {
        float: right;
        }
    </style>
</head>
<body>
    <div class="news">
        <img src="1.jpg"/>
        <p>some text</p>
    </div>
</body>
</html>

 

解决方法一：额外标签法，<div style="clear:both;"></div>，<br style="clear:both;"/>，<hr style="clear:both;"/>

优点：简单，代码少，浏览器兼容性好。

缺点：需要添加大量无语义的html元素，代码不够优雅，后期不容易维护。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
    <style>
        .news {
        background-color: gray;
        border: solid 1px black;
        }

        .news img {
        float: left;
        }

        .news p {
        float: right;
        }
    </style>
</head>
<body>
    <div class="news">
        <img src="1.jpg"/>
        <p>some text</p>
        <div style="clear:both;"></div>
    </div>
</body>
</html>

 

方法二：用after伪元素（推荐）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
    <style>
        .news {
        background-color: gray;
        border: solid 1px black;
        }

        .news::after{ /*添加了一个看不见的空格"020"或点"."*/
        content: "020"; /*content:".";*/
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
        }

        .news img {
        float: left;
        }

        .news p {
        float: right;
        }
    </style>
</head>
<body>
    <div class="news">
        <img src="1.jpg"/>
        <p>some text</p>
    </div>
</body>
</html>

 

方法三：父元素添加overflow:hidden;或overflow:auto;（这种方法可行）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
    <style>
        .news {
        background-color: gray;
        border: solid 1px black;
        overflow:auto;/*hidden*/
        }

        .news img {
        float: left;
        }

        .news p {
        float: right;
        }
    </style>
</head>
<body>
    <div class="news">
        <img src="1.jpg"/>
        <p>some text</p>
    </div>
</body>
</html>

 

方法四：父元素添加float属性。但是这样会使其整体浮动，影响布局，不推荐使用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
    <style>
        .news {
        background-color: gray;
        border: solid 1px black;
        float: left;
        }

        .news img {
        float: left;
        }

        .news p {
        float: right;
        }
    </style>
</head>
<body>
    <div class="news">
        <img src="1.jpg"/>
        <p>some text</p>
    </div>
</body>
</html>

 

总共两种思路：

1.方法一和二都是利用clear属性，对后面的元素进行处理；

2.方法三和四，对父元素处理。

清除浮动


联系
我们