文档章节

清除浮动

notAcoder
 notAcoder
发布于 2013/09/30 04:37
字数 261
阅读 77
收藏 0

这里介绍三种清除浮动的方法:

方法1:

我们html结构

<div class="A clearfix">
    	<div class="C floatLeft">
    		
    	</div>
    	<div class="B floatLeft">
    		
    	</div>
    	<div class="D floatLeft"></div>
    </div>
css
        .C{
		height:100px;
		width:100px;
		background:#eee;
	}
	.floatLeft{
		float:left;
	}
	.B{
		height:50px;
		width:70px;
		background:#0fcd4e;
	}
	.D{
		height:110px;
		width:50px;
		background:#f35ded;
	}
	.A{
		background:#aaa;
		border: 1px solid #111;
	}
   
      .clearfix:before,
      .clearfix:after {
          content:"";
          display:table;
      }
     .clearfix:after {
         clear:both;
         overflow:hidden;
      }
     .clearfix {
        zoom:1; /* IE < 8 */
     }

方法2:


<div class="A">
    	<div class="C floatLeft">
    		
    	</div>
    	<div class="B floatLeft">
    		
    	</div>
    	<div class="D floatLeft"></div>
    	<div class="clear"></div>
    </div>
css



.C{
		height:100px;
		width:100px;
		background:#eee;
	}
	.floatLeft{
		float:left;
	}
	.B{
		height:50px;
		width:70px;
		background:#0fcd4e;
	}
	.D{
		height:110px;
		width:50px;
		background:#f35ded;
	}
	.A{
		background:#aaa;
		border: 1px solid #111;
	}
	.clear {
	    clear:both;/*主要使用这个属性来清除浮动*/
	    /*为了不让ie具有一定的空间,个人建议加上下面三个属性*/
	    height: 0;
	    line-height: 0;
	    font-size: 0;
	  }
方法3:


<div class="A">
    	<div class="C floatLeft">
    		
    	</div>
    	<div class="B floatLeft">
    		
    	</div>
    	<div class="D floatLeft"></div>
    </div>


css


.C{
		height:100px;
		width:100px;
		background:#eee;
	}
	.floatLeft{
		float:left;
	}
	.B{
		height:50px;
		width:70px;
		background:#0fcd4e;
	}
	.D{
		height:110px;
		width:50px;
		background:#f35ded;
	}
	.A{
		background:#aaa;
		
		border: 1px solid #111;
		overflow: auto;
	}
	
	
   * html .A {
      zoom: 1; /* IE5-6 */
   }


© 著作权归作者所有

上一篇: 堆排序
下一篇: 初始值
notAcoder
粉丝 5
博文 30
码字总数 12671
作品 0
巴南
架构师
私信 提问
CSS清除浮动_清除float浮动

CSS清除浮动方法集合 一、浮动产生原因 - TOP 一般浮动是什么情况呢?一般是一个盒子里使用了CSS float浮动属性,导致父级对象盒子不能被撑开,这样CSS float浮动就产生了。 浮动产生样式效果...

单线程生物
2016/04/07
84
0
[转]CSS clear both清除浮动

本文转载于:猿2048网站[转]CSS clear both清除浮动 DIV+CSS clear both清除产生浮动 我们知道有时使用了css float浮动会产生css浮动,这个时候就需要清理清除浮动,我们就用clear样式属性即可...

前端老手
09/05
9
0
CSS布局模型 之 浮动模型(浮动的工作原理和清除浮动技巧?)

浮动的工作原理 浮动是让某元素脱离文档流,在浮动框之前和之后的非定位元素会当它不存在一样,可能沿着它的另一侧垂直流动,但都为其腾出空间,块级元素也不例外(被浮动元素占据了部分行空...

艺晨光
2017/08/22
0
0
清除浮动的七种方式方法(实例代码讲解)

今天给大家分享的是清除浮动的具体代码实现,主要是帮助大家理解哪一种清除浮动比较好,辨析它们的优缺点而已。清除浮动有很多种,如何进行选择清除浮动呢?E良师益友网就拿下面的一个例子来...

罗马教堂的钟声
2015/12/22
84
0
前端开发笔记(3)css基础(中)

上一篇中我们学习了html的标准文档流,下面我们先来看看如何脱离标准流。 脱离标准流 css中一共有三种方法脱离标准流 浮动 绝对定位 固定定位 浮动 我们要搞清楚什么是浮动,先来看一个标准文...

lxq_xsyu
2016/11/18
0
0

没有更多内容

加载失败,请刷新页面

加载更多

可见性有序性,Happens-before来搞定

写在前面 上一篇文章并发 Bug 之源有三,请睁大眼睛看清它们 谈到了可见性/原子性/有序性三个问题,这些问题通常违背我们的直觉和思考模式,也就导致了很多并发 Bug 为了解决 CPU,内存,IO ...

tan日拱一兵
38分钟前
3
0
网络七层模型与TCP/UDP

为了使全球范围内不同的计算机厂家能够相互之间能够比较协调的进行通信,这个时候就有必要建立一种全球范围内的通用协议,以规范各个厂家之间的通信接口,这就是网络七层模型的由来。本文首先...

爱宝贝丶
41分钟前
4
0
Jenkins World 贡献者峰会及专家答疑展位

本文首发于:Jenkins 中文社区 原文链接 作者:Marky Jackson 译者:shunw Jenkins World 贡献者峰会及专家答疑展位 本文为 Jenkins World 贡献者峰会活动期间的记录 Jenkins 15周岁啦!Jen...

Jenkins中文社区
59分钟前
10
0
杂谈:面向微服务的体系结构评审中需要问的三个问题

面向微服务的体系结构如今风靡全球。这是因为更快的部署节奏和更低的成本是面向微服务的体系结构的基本承诺。 然而,对于大多数试水的公司来说,开发活动更多的是将现有的单块应用程序转换为...

liululee
今天
8
0
OSChina 周二乱弹 —— 我等饭呢,你是不是来错食堂了?

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @ 自行车丢了:给主编推荐首歌 《クリスマスの夜》- 岡村孝子 手机党少年们想听歌,请使劲儿戳(这里) @烽火燎原 :国庆快来,我需要长假! ...

小小编辑
今天
1K
14

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部