CSS消除波动方式小结

1、设定父元素高宽比

假如1个元素要波动,那末它的先祖元素1定要有高宽比.高宽比的盒子,才可以关住波动

要是波动在1个有高宽比的盒子中,那末这个波动就不容易危害后边的波动元素.因此便是消除波动带来的危害了.

缺点：工作中上，大家肯定不容易给全部的盒子加高宽比，这是由于不便，而且不可以融入网页页面的迅速转变。

2、overflow

撑起父元素的高宽比

1个父亲不可以被自身波动的儿子撑出高宽比。可是，要是给父亲再加overflow:hidden; 那末，父亲就可以被儿子撑出高了。

overflow:hidden;可以让margin起效。

overflow:hidden;
overflow:auto;

缺点：假如有外溢要显示信息的內容，也都另外给掩藏了。

3、提升子元素（块级），而且设定其clear特性值为both来处理

<div>
      <p></p>
      <p></p>
     <p></p>
  </div>
   <div>   → clear:both;
       <p></p>
       <p></p>
     <p></p>
  </div>

最简易的消除波动的方式，便是给盒子提升clear:both；表明自身的內部元素，不会受到别的盒子的危害。

缺点：便是margin无效。两个div之间，沒有任何的空隙了。

3.1、隔墙法：

在两一部分波动元素正中间，建1个墙。分隔两一部分波动，让后边的波动元素，不去追前面的波动元素。

墙用自身的人体作为了空隙。

<div>
       <p></p>
       <p></p>
       <p></p>
  </div>
   <div class="clear"></div>
   <div>
      <p></p>
      <p></p>
      <p></p>
  </div>

大家发现，隔墙法功能强大，可是第1个div，還是沒有高宽比。假如大家如今想让第1个div，全自动的依据自身的儿子，撑出高宽比。

3.2、内墙法：

<div>
       <p></p>
       <p></p>
       <p></p>
       <div class="clear"></div>
   </div>
  <div>
       <p></p>
      <p></p>
      <p></p>
  </div>

内墙法的优势便是，不仅可以让后一部分的p不去追前一部分的p了，而且能把第1个div撑出高宽比。

这样，这个div的情况、边框就可以够依据p的高宽比来撑开

4、应用after或before伪目标消除波动

div:after{content:"";display:block;clear:both;}
div:before{content:"";display:block;clear:both;}

这类方法用的较为多，在新项目中提议应用这类方法

以上便是本文的所有內容，期待本文的內容对大伙儿的学习培训或工作中能带来1定的协助，另外也期待多多适用脚本制作之家！