浮动引发的Bug

最新推荐文章于 2022-05-07 10:32:50 发布

原创最新推荐文章于 2022-05-07 10:32:50 发布 · 320 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#浮动 #清除浮动 #浮动引发的Bug

css 专栏收录该内容

4 篇文章

订阅专栏

本文详细介绍了在网页布局中解决浮动元素导致的父元素高度塌陷问题的六种常见解决方案，包括给父级添加浮动、使用inline-block、添加清除浮动的div、使用br标签、添加zoom属性以及设置overflow属性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

浮动引发的Bug

浮动的方法
float：left；right；none

浮动的原理
改变元素的排布方式；浮动元素会脱离文档流。

浮动影响
产生卡顿；浮动的子元素撑不开父元素高度。父元素不设置高度，子元素都浮动；

浮动解决方法

1.给父级也加浮动（这种情况当父级margin:0 auto;时不居中）

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>1.给父级也加浮动(不居中了)</title>
    <style>
        .parentElement{ width:300px;margin:0 auto;border:10px solid #000;float:left;}
        .subElement{ width:200px;height:200px;background:red;float:left;}
    </style>
</head>
<body>
<div class="parentElement">
        <div class="subElement"></div>
</div>
</body>
</html>

2.给父级加display:inline-block;(这种情况当父级margin:0 auto;时不居中。只有IE6,7居中)

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>给父级加display:inline-block</title>
    <style>
        .parentElement{ width:300px;margin:0 auto;border:10px solid #000; display:inline-block;}
        .subElement{ width:200px;height:200px;background:red;float:left;}
    </style>
</head>
<body>
<div class="parentElement">
        <div class="subElement"></div>
</div>
</body>
</html>

3.在浮动元素下加

IE6下，块元素有最小高度，即当height<19px时，默认为19px;
解决方法：font-size:0;或overflow:hidden;

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>在浮动元素下加<div class="clear"></div></title>
    <style>
        .parentElement{ width:300px;margin:0 auto;border:10px solid #000;}
        .subElement{ width:200px;height:200px;background:red;float:left;}
        .clear{ height:0px;font-size:0;clear:both;}
    </style>
</head>
<body>
    <div class="parentElement">
        <div class="subElement"></div>
        <div class="clear"></div>
    </div>
</body>
</html>

4.在浮动元素下加

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>在浮动元素下加<br clear="all"/></title>
    <style>
        .parentElement{ width:300px;margin:0 auto;border:10px solid #000;}
        .subElement{ width:200px;height:200px;background:red;float:left;}

    </style>
</head>
<body>
    <div class="parentElement">
        <div class="subElement"></div>
        <br clear="all"/>
    </div>
</body>
</html>

5.给浮动元素父级加{zoom:1;}
:after{content:""; display:block;clear:both;}
在IE6，7下浮动元素的父级有宽度就不用清浮动
haslayout 根据元素内容的大小或者父级的父级的大小来重新的计算元素的宽高
display: inline-block
height: (任何值除了auto)
float: (left 或 right)
width: (任何值除了auto)
zoom: (除 normal 外任意值)

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>无标题文档</title>
    <style>
        .parentElement{margin:0 auto;border:10px solid #000;}
        .subElement{ width:200px;height:200px;background:red;float:left;}
        .clear{zoom:1;}
        .clear:after{content:""; display:block;clear:both;}
    </style>
</head>
<body>
    <div class="parentElement clear">
            <div class="subElement"></div>
    </div>
</body>
</html>

6.给浮动元素父级加overflow:auto;或者overflow:hidden;

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>无标题文档</title>
    <style>
        .parentElement{ width:300px;border:10px solid #000;overflow:hidden;}
        .subElement{ width:200px;height:200px;background:Red;float:left;}
    </style>
</head>
<body>
<div class="parentElement">
    <div class="subElement"></div>
</div>
</body>
</html>