当前位置：网站首页>Several ways to clear floating

Several ways to clear floating

2022-07-07 12:35:00 【Xiaoding Chong duck!】

Three column layout , Both use floating , Causes the parent element to collapse highly , The effect is as follows ：

  The code is as follows ：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello</title>
  </head>
  <style>
    .parent {
      border: 3px #ffaaa7 solid;
    }
    .child {
      height: 300px;
    }
    .child:nth-child(1) {
      width: 200px;
      float: left;
      background-color: #98ddca;
    }
    .child:nth-child(2) {
      background-color:#d5ecc2;
      width: calc(100% - 400px);
      float: left;
    }
    .child:nth-child(3) {
      background-color:#ffd3b4;
      width: 200px;
      float: right;
    }
  </style>
  <body>
    <div class="parent">
      <div class="child">1</div>
      <div class="child">2</div>
      <div class="child">3</div>
    </div>
  </body>
</html>

Clear the float to achieve the effect ：

One 、 Pseudo elements

It is equivalent to adding a block level element , And set up clear:both

 .parent:after {
      content: '';
      display: block;
      clear: both;
  }

Two 、clear

You can add clear, In this case , Because of three child Elements are floating , So add an empty one at the end div, And then add clear:both that will do 

 <div class="parent">
      <div class="child">1</div>
      <div class="child">2</div>
      <div class="child">3</div>
      <div style="clear:both"></div>
 </div>

3、 ... and 、 Parent div Definition overflow:hidden

Parent element Settings overflow:hidden（ except "visible" Any valid value other than ） After that, the parent element will form a BFC, and BFC The height of is the height containing the internal floating elements 

.parent {
      border: 3px #ffaaa7 solid;
      overflow: hidden;
 }

In fact, all can make the parent element produce BFC Can solve the problem , But some will cause additional problems .

 

原网站

版权声明
本文为[Xiaoding Chong duck!]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/02/202202130617454215.html

边栏推荐

猜你喜欢

随机推荐