微信二维码
微博二维码
qq号二维码

清除浮动

夏磊银 2020.05.09 44人浏览
清除浮动常见方法

清除浮动主要是为了解决,父元素因为子级元素浮动引起的内部高度为0的问题

<style>

.big{

width: 100%;

height: auto;

background: sandybrown;

}

.a{

float: left;

width: 100px;

height: 100px;

background: aqua;

}

.b{

float: left;

width: 200px;

height: 200px;

background: palegreen;

}

.c{

float: left;

width: 300px;

height: 300px;

background: paleturquoise;

}

clear:both:本质就是闭合浮动, 就是让父盒子闭合出口和入口,不让子盒子出来

</style>

额外标签(不推荐)

<div class="big">

<div class="a"></div>

<div class="b"></div>

<div class="c"></div>

<div style="clear: both;"></div>

</div>

触发父级BFC

<div class="big" style="overflow: hidden;">

<div class="a"></div>

<div class="b"></div>

<div class="c"></div>

</div>

单伪类处理(推荐)

<style type="text/css">

.clearfix:after{

content: "";

display: block;

height: 0;

clear: both;

visibility: hidden;

}

.clearfix{

/*ie6清除浮动的方式 *号只有IE6-IE7执行,其他浏览器不执行*/

*zoom: 1;

}

</style>

<div class="big clearfix">

<div class="a"></div>

<div class="b"></div>

<div class="c"></div>

</div>

双伪类

<style type="text/css">

.clearfix:after,.clearfix:before{

content: "";

display: table;

}

.clearfix:after{

clear: both;

}

.clearfix{

*zoom: 1;

}

</style>

<div class="big clearfix">

<div class="a"></div>

<div class="b"></div>

<div class="c"></div>

</div>


分享到:
微信小程序之wx.uploadFile
  • 2019.11.30
  • 日语学习难吗?80天零基础到N2!天津日语培训
  • 2020.06.05
  •