当前位置:湖南快乐十分走势图>文章>HTML

清除浮动的几种方式

湖南快乐十分走势图 www.eh3l1.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;
}


相关阅读:

  • V社:Steam中国不锁区 但游戏上线需通过审核 2019-04-21
  • 谢森的专栏作者中国国家地理网 2019-04-15
  • 构建“选育管用带”培养链 磐安探索年轻干部培养“八法” 2019-04-15
  • 大学毕业生是不是越来越过剩?当然大学毕业生可以在多种行业就业,比如农村、服务业等等。不过,过剩还是一种极大的浪费。 2019-04-14
  • 陈坤9年之后重回小荧屏 2019-04-14
  • 端午节当天广州地铁延长1小时收车 2019-04-12
  • 期末评语少些“百搭句” 应最大限度地为学生成长服务 2019-04-01
  • 中船重工总经理孙波涉嫌严重违纪违法被查 2019-04-01
  • 当然,可这免费卡可以转给他人用,而这人并非是享有免费的人[微笑] 2019-03-30
  • 【省水保院】召开党风廉政建设领导小组会议 2018-12-08
  • 阿不都20+5王哲林14分 红队20分大胜复仇澳联队 2018-07-26
  • 深圳市低碳产业投资商会来保定市考察 2018-07-25
  • 福州率先出台人才共有产权住房政策 工作满12年可获完全产权 2018-07-24
  • 【十九大·理论新视野】动漫:“伟大工程”如何造就 2018-07-23
  • 淘票票实施全链路营销策略,推动电影宣发进入“共振”时代 2018-07-22
  • 846| 73| 779| 588| 105| 632| 308| 614| 744| 128|