BFC/clear/::after伪元素 解决高度坍塌, ::before解决外边距重叠 (clearfix同时解决高度塌陷和外边距重叠)(css)

BFC/clear/::after伪元素 解决高度坍塌, ::before解决外边距重叠 (clearfix同时解决高度塌陷和外边距重叠)(css)


高度塌陷的问题:

  • 在浮动布局中,父元素的高度默认是被子元素撑开;
  • 当子元素浮动后,其会完全脱离文档流,将会无法撑起父元素的高度,导致父元素的高度丢失

BFC(Block Formatting Context) 块级格式化环境

  • BFC是一个CSS中的一个隐含属性,可以为一个元素开启,开启BFC后该元素会变成一个独立的布局区域
  • 元素开启BFC后的特点:
    1. 开启BFC的元素不会被浮动元素所覆盖
    2. 开启BFC的元素子元素和父元素外边距不会重叠
    3. 开启BFC的元素可以包含浮动的子元素
    .
  • 通过一些特殊方式来开启元素的BFC:
    1. 设置元素的浮动(不推荐)
    2. 将元素设置为行内块元素(不推荐)
    3. 将元素的overfiow 设置为一个非 visible 的值
      • 常用的方式:为元素设置 overflow: hidden 开启其BFC 以使其可以包含浮动元素

clear
(如果我们不希望某个元素因为其他元素浮动的影响而改变位置,可以通过clear属性来清楚浮动元素对当前元素所产生的影响)

  • 作用:清楚浮动元素对当前元素所产生的影响
clear: xxx;
left 清除左侧浮动元素对当前元素的影响
right 清除右侧浮动元素对当前元素的影响
both 清除两侧中最大影响的那侧
  • 原理:设置清除浮动以后,浏览器会自动为元素添加一个上外边距,以使其位置不受其他元素的影响.
::after伪元素解决高度坍塌


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>after伪元素清除元素坍塌title>
head>
    <style>
    
        .box1{
            border: 10px red solid;
        }
        
        .box2{
            width: 100px;
            height: 100px;
            background-color: #bbffaa;
            float: left;
        }
        
        .box1::after{       /* 相当于在box1中box2后面添加一个标签 用它来撑开父元素*/
            content: '';
            display: block;
            clear: both;
        }
        
    style>
<body>
    <div class="box1">
        <div class="box2">div>
        
    div>
body>
html>

::before解决外边距重叠问题


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>::before解决外边距重叠title>
head>
    <style>
    
        .box1{
            width: 200px;
            height: 200px;
            background-color: #bfa;
        }
        
        .box1::before{
            content: '';
            display: table;
        }
        
        .box2{
            width: 100px;
            height: 100px;
            background-color: orange;
            margin-top: 100px;
        }
        
    style>
<body>
    <div class="box1">
        <div class="box2">div>
    div>
body>
html>

clearfix同时解决高度坍塌与外边距重叠问题

/* clearfix解决外边距重叠*/

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>clearfix解决外边距重叠 title>
head>
    <style>
    
        .box1{
            width: 200px;
            height: 200px;
            background-color: #bfa;
        }
        
        .box2{
            width: 100px;
            height: 100px;
            background-color: orange;
            margin-top: 100px;
        }
        
        .clearfix::before,
        .clearfix::after{
            content: '';
            display: table;
            clear: both;
        }
        
    style>
<body>
    <div class="box1 clearfix">
        <div class="box2">div>
    div>
body>
html>
/*clearfix解决高度塌陷 */

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>clearfix解决高度塌陷title>
head>
    <style>
    
        .box1{
            border: 10px red solid;
        }
        
        .box2{
            width: 100px;
            height: 100px;
            background-color: #bfa;
            float: left;
        }
        
        .clearfix::before,
        .clearfix::after{
            content: '';
            display: table;
            clear: both;
        }
        
    style>
<body>
    <div class="box1 clearfix">
        <div class="box2">div>
    div>
body>
html>

你可能感兴趣的:(前端)