CSS中高度塌陷问题以及解决办法

一.什么是高度塌陷

首先在DOM中,父元素div的高度在没有设定高度情况下是默认被子元素撑开,就是说父多高,子就有多高。可是在设定子元素为float:left/right后,子元素会完全脱离文档流,此时将会导致子元素无法撑起父元素的高度,导致父元素的高度塌陷。

这样可能导致子元素对于父元素脱节,上移,导致整个界面布局混乱。一下是我设定的高度塌陷的实例:

DOCTYPE html> 
<html> 
    <head> 
        <meta charset="utf-8" /> 
        <title>title> 
        <style type="text/css"> 
 
            .box1{ 
                /*为box1设置一个边框*/ 
                border: 10px red solid; 
 
            } 
 
            .box2{ 
                width: 100px; 
                height: 100px; 
                background-color: blue; 
                float: left; 
            } 
 
            .box3{ 
                 height: 100px; 
                 background-color: yellow; 
            } 
 
        style> 
    head> 
    <body> 
 
        <div class="box1"> 
            <div class="box2">div> 
        div> 
 
        <div class="box3">div> 
 
    body> 
html> 

结果:
在这里插入图片描述

二.解决方案

1.推介使用,单伪元素after清除浮动: after+zoom(最好用的,最推荐的,兼容性也很好)

.box1::after{
    content: "";/*伪元素内容为空*/
    display: block;/*非默认的就行,也可以是table等等*/
    height: 0;/*伪元素高度为0,不影响其他元素*/
    clear: both;/*清除浮动*/
    visibility: hidden;/*不可见*/
}

效果:
CSS中高度塌陷问题以及解决办法_第1张图片
2.给父元素设置固定高度(不推荐)
使用该方法后,父元素的高度就不能根据子元素自动撑高了,如果可以固定高度,可以使用这种方式,否则,不推荐这种方式。以下是我的做法

DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>title>
    <style type="text/css">

        .box1{
            /*为box1设置一个边框*/
            border: 10px red solid;
            width: 100px;
            height: 100px;
        }

        .box2{
            width: 100px;
            height: 100px;
            background-color: blue;
            float: left;
        }

        .box3{
            height: 100px;
            background-color: yellow;
        }

        
    style>
head>
<body>

<div class="box1">
    <div class="box2">div>
div>

<div class="box3">div>

body>
html>

效果图:
CSS中高度塌陷问题以及解决办法_第2张图片
3、 额外标签法: 加一个空div标签清除浮动( 不推荐)

<body>
    <div class="box1"> 
        <div class="box2">div> 
        !--加一个标签,清除浮动-->
        <div style="clear: both;">div> 
    div>
    <div class="box3">div> 
body>

缺点: 因为html的原则是写出语义化的标签,这种方式会额外增加无意义的标签。

你可能感兴趣的:(css,html,css3)