当前位置：网站首页>Clear the cause of floating and six methods (solve the problem that floating affects the parent element and the global)

Clear the cause of floating and six methods (solve the problem that floating affects the parent element and the global)

2022-07-28 02:15:00 【Xiao Lin loves to share】

problem ：

When using floating to adjust the style , The area where the float is located will not occupy a position in the page （ In the air , Not occupy the actual position ）, The problem is as follows , It will cause the lower element block to top directly , Can not achieve the effect of separating up and down ：
Insert picture description here

 meaning ： Remove the effect of floating 
~ influence ： If the child element floats , At this time, the child element cannot open the block level parent element of the standard flow 
~ reason ：  The sub element floats and is de labeled  →  Don't occupy a place 
~ Purpose ：  The parent element is required to have a height , So as not to affect the layout of other web page elements

Method ：

① Set the height of the parent element directly

characteristic ：
• advantage ： Simple and crude , convenient
• shortcoming ： In some layouts, the height of the parent element cannot be fixed . Such as ： News list 、 JD recommends modules
Because the height of the content is uncertain , Easy enough or leave blank , It will not be used in practice .

H5
<body>
  <div class="father">
    <div class="son"></div>
  </div>
</body>
 style 
  <style>
    .father {
      /* height: 400px; */  If it is not set , The parent element cannot be displayed , The height of the parent element will be 0, Not supported by child elements 
      width: 400px;
      background-color: pink;
    }

    .son {
      float: left;
      width: 100px;
      height: 400px;
      background-color: blue;
    }
  </style>

② Extra label method

• operation ：

Add a block level element at the end of the parent element content
Set... For the added block level element clear:both
• shortcoming ： Additional tags will be added to the page , Will make the page HTML The structure becomes complicated

H5：
  <div class="father">
    <div class="son"></div>
    <div class="abc"></div>
  </div>
   style ：
    <style>
    .father {
      width: 400px;
      background-color: pink;
    }

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

    .abc{
      clear: both;
    }
  </style>

③ Single pseudo element elimination method

Insert picture description here

H5 in ：
  <div class="father clearfix">   Set him two class names , At the same time 
    <div class="son"></div>
  </div>
   Subsequent classes include clearfix Can 
  <div class="clearfix"></div>
  <div class="clearfix"></div>
  <div class="clearfix"></div>
  <div class="clearfix"></div>
  
   In the style ：
    <style>
    .father {
      width: 400px;
      background-color: pink;
    }
    .son {
      float: left;
      width: 100px;
      height: 400px;
      background-color: blue;
    }
    .clearfix::after {   /*clearfix Class is set here */
      content: '';  /* Is a pseudo element must be added , It can be set to null */
      display: block;
      clear: both;  /* It is equivalent to extracting the previous method */
      /*  Supplementary code ： You can't see pseudo elements in the web page  */
      height: 0;
      visibility: hidden; 
    }
  </style>

④ Double pseudo element elimination

Insert picture description here

<!DOCTYPE html>
<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>Document</title>
  <style>
    .father {
      width: 400px;
      background-color: pink;
    }
    .son {
      float: left;
      width: 100px;
      height: 400px;
      background-color: blue;
    }
    .clearfix::before, /* It can solve the collapse problem of the upper part of the box */
    .clearfix::after {
      content: '';
      display: table;
    }
    .clearfix::after {
      clear: both;
    }
  </style>
</head>
<body>
  <div class="father clearfix">
    <div class="son"></div>
  </div>
</body>
</html>

⑤ Set the parent element overflow : hidden

H5
  <div class="father">
    <div class="son"></div>
  </div>
   style ：
 <style>
    .father {
      width: 400px;
      background-color: pink;
      overflow: hidden;    /* Operate directly on the parent element */
    }
    .son {
      float: left;
      width: 100px;
      height: 400px;
      background-color: blue;
    }
  </style>

⑥BFC The box （ understand ）

Insert picture description here

<!DOCTYPE html>
<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>Document</title>
  <style>
    .father {
      /* 1、 hold father Box converted to BFC The box , solve ： Remove the floating  */
      /* float: left; */
      /* display: inline-block; */
      overflow: hidden;
      width: 400px;
      background-color: pink;
    }

    .son {
      float: left;
      width: 100px;
      height: 400px;
      background-color: blue;
    }
    
  </style>
</head>
<body>
  <div class="father">
    <div class="son"></div>
  </div>
</body>
</html>

原网站

版权声明
本文为[Xiao Lin loves to share]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/209/202207280036081620.html