当前位置:湖北11选5开奖号码>文章>HTML

清除浮动的几种方式

湖北11选5开奖号码 www.lyrso.cn 不清除浮动会怎样?

(1):背景不能显示

(2):边框不能撑开

(3):margin 设置值不能正确显示

(4):下方内容往上移盖住浮动区域的内容

html代码:

<div class="container">    <div class="fl"></div>    <div class="fr"></div></div><style>
    .fl{float:left;}
    .fr{float:right;}</style>

 

方式一:

.container下,最后再加一个div如下:

<div style="clear: both;height: 0; line-height: 0; font-size: 0"></div>

 

方式二:

给父元素.container添加样式:

.container{
    overflow: auto;
    zoom: 1;
}

 

方式三:

伪类清除浮动:after:

.container:after{
    content:'';
    display: block;
    clear: both;
    height:0;
    width:100%;
    visibility: hidden;
}.container{  zoom:1;//为了兼容IE}

 

方法四:

双伪类清除浮动:

.container:before,.container:after {
    content: "";
    display: block;
    clear: both;
}.container{
    zoom: 1;
}

方式五:

展现为表格,需设置宽度:

.container{
    width:100%;
    display:table;
}

 

方式六:

展现为内联块状,需设置宽度:

.container{
    width:100%;
    display:inline-block;
}

 

方式七:

超出隐藏,不推荐使用

.container{
    overflow:hidden;
}

 

方式八:

给父元素定义高度,不推荐使用

.container{
    height:50px;
}


相关阅读:

  • 【微图解】东峰书记的一周时间(6月11日——6月17日) 2019-04-25
  • 文化山西:中国文明从这里开始 2019-04-25
  • 德味手表了解一下 徕卡推出L1,L2机械表德味手表徕卡推出L1-手机行情 2019-04-10
  • 春节我在岗:爸妈,儿子在军营给您们拜年了 2019-04-10
  • 打倒控房抄者有理,去分房好! 2019-04-08
  • 井助国:我参与了审判日本战犯 2019-03-26
  • 陕西省延安市召开学习《共产党宣言》成果交流会 2019-03-24
  • 《泄密者》提档6.15 终极预告预知真相 2019-03-10
  • 内政部长威胁“单飞”,联盟党闹分裂,默克尔或下台? 2019-03-10
  • 余世存:阅读经典不仅是消费,也是责任 2018-12-11
  • 英国伦敦大学最新研究发现:单身的人老痴风险增四成 2018-08-09
  • 作用-热门标签-华商生活 2018-07-15
  • 国地税正式合并!一文读懂来龙去脉 2018-07-15
  • 453| 576| 419| 827| 756| 146| 555| 252| 842| 990|