前端学习笔记50-解决高度塌陷的最终方案

前端学习笔记50-解决高度塌陷的最终方案


前面提到的用BFC解决高度塌陷,多少都有点不好,因此用上一节学的clear来解决高度塌陷。

先看高度塌陷


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        .box1{
      
            border: 10px red solid;
        }
        .box2{
      
            width: 100px;
            height: 100px;
            background-color: yellow;
            float:left;
        }

    style>
head>
<body>
    <div class="box1">
        <div class="box2">div>
    div>


body>
html>

前端学习笔记50-解决高度塌陷的最终方案_第1张图片
这个塌陷是因为box1只有一个子元素,如果有其他子元素,就不会塌陷了。
看代码


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        .box1{
      
            border: 10px red solid;
        }
        .box2{
      
            width: 100px;
            height: 100px;
            background-color: yellow;
            float:left;
        }
        .box3{
      
            clear:both
        }
    style>
head>
<body>
    <div class="box1">
        <div class="box2">div>
        <div class="box3">div>
    div>
body>
html>

前端学习笔记50-解决高度塌陷的最终方案_第2张图片
设置了一个空的box3,而且用clear使其位置不受box2的浮动而变化范围,这样box1就被box3的位置而撑起来了。

但是这样凭空加一个box3不合理。加box3是html的事,而css只负责表现,所以高度塌陷问题还是得想办法由css自己解决。
思路不变,还是想加一个空标签在后面,于是用为伪元素after。伪元素

这里要注意,after伪元素默认是行内元素,得用display转为块元素。


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        .box1{
      
            border: 10px red solid;
        }
        .box2{
      
            width: 100px;
            height: 100px;
            background-color: yellow;
            float:left;
        }
        .box1::after{
      
            content:'';
            clear: both;
            display:block;
        }
    style>
head>
<body>
    <div class="box1">
        <div class="box2">div>
    div>
body>
html>

前端学习笔记50-解决高度塌陷的最终方案_第3张图片

你可能感兴趣的:(小白前端学习,html,css)