当前位置:山东群英会技巧>文章>HTML

清除浮动的几种方式

山东群英会技巧 www.iba5.com.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;
}


相关阅读:

  • A股市场具有较强估值支撑 机构看好政策受益板块 2019-04-12
  • 传奇“斗士”谢幕:只可远观李敖,不然会被他亵玩 2019-04-12
  • 社会民生--北京频道--人民网 2019-04-03
  • 荷兰音乐节巴士冲撞人群事件致1死3伤 肇事者自首 2019-03-25
  • 岳麓书院再现兴盛之貌 2019-03-24
  • 女性之声——全国妇联 2019-03-23
  • 多彩课堂熔铸红色魂——甘祖昌干部学院教学素描 2019-03-23
  • 以谁之名做事,自然就该谁负责。法庭的判决确实没有道理。共产党的形象来自于每个共产党员的表现,如果事情做得有问题,把责任往哪个人身上一推就可以事不关己高高挂起的话 2019-03-20
  • 全国政协常委、中国石油大学(北京)校长张来斌谈“贯彻五大发展理念 推进高校改革发展” 2019-03-20
  • 浙大科研团队15载攻克歼20等飞机装配系列难题 2019-03-18
  • 人民网时尚携20位明星大咖齐拜年  2019-03-18
  • 统计局:5月份经济运行主要指标呈现五大特点 2019-03-15
  • 进不了朋友圈,身份认同难。 2019-03-15
  • 朗斯卫浴向伟昌:舒服才是完美卫浴空间的必备要素 2019-03-15
  • 人为某种意识而奋斗是幸福的,获得成绩或成就更幸福。 2019-03-11
  • 679| 183| 918| 798| 705| 391| 980| 613| 897| 699| 333| 492| 201| 111| 156|