清除浮动

Posted 森森森0w0

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了清除浮动相关的知识,希望对你有一定的参考价值。

浮动元素引起的问题:

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


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        .news {
        background-colorgray;
        bordersolid 1px black;
        }

        .news img {
        floatleft;
        }

        .news p {
        floatright;
        }
    </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">
    <style>
        .news {
        background-colorgray;
        bordersolid 1px black;
        }

        .news img {
        floatleft;
        }

        .news p {
        floatright;
        }
    </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">
    <style>
        .news {
        background-colorgray;
        bordersolid 1px black;
        }

        .news::after/*添加了一个看不见的空格"020"或点"."*/
        content"020"/*content:".";*/
        displayblock;
        height0;
        clearboth;
        visibilityhidden;
        }

        .news img {
        floatleft;
        }

        .news p {
        floatright;
        }
    </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">
    <style>
        .news {
        background-colorgray;
        bordersolid 1px black;
        overflow:auto;/*hidden*/
        }

        .news img {
        floatleft;
        }

        .news p {
        floatright;
        }
    </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-colorgray;
        bordersolid 1px black;
        floatleft;
        }

        .news img {
        floatleft;
        }

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

 

总共两种思路:

1.方法一和二都是利用clear属性,禁止左/右侧存在浮动元素。

2.方法三和四,对父元素处理,使之变成BFC。

以上是关于清除浮动的主要内容,如果未能解决你的问题,请参考以下文章

CSS清除浮动 ③ ( 清除浮动 - 使用 after 伪元素 | 语法简介 | 兼容低版本浏览器 | 原理分析 )

清除浮动

清除浮动的几种方法

css的浮动以及如何清除浮动

为何要清除浮动?如何清除?

clear清除浮动最佳实践和BFC清除浮动