浮动引发的Bug

本文详细介绍了在网页布局中解决浮动元素导致的父元素高度塌陷问题的六种常见解决方案,包括给父级添加浮动、使用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>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值