文档章节

CSS清除浮动_清除float浮动

单线程生物
 单线程生物
发布于 2016/04/07 19:57
字数 1373
阅读 82
收藏 4

CSS清除浮动方法集合

一、浮动产生原因   -   TOP

一般浮动是什么情况呢?一般是一个盒子里使用了CSS float浮动属性,导致父级对象盒子不能被撑开,这样CSS float浮动就产生了。

CSS浮动产生截图
浮动产生样式效果截图

本来两个黑色对象盒子是在红色盒子内,因为对两个黑色盒子使用了float浮动,所以两个黑色盒子产生了浮动,导致红色盒子不能撑开,这样浮动就产生了。

简单地说,浮动是因为使用了float:leftfloat:right或两者都是有了而产生的浮动。

二、浮动产生负作用   -   TOP

1、背景不能显示
由于浮动产生,如果对父级设置了(CSS background背景CSS背景颜色CSS背景图片,而父级不能被撑开,所以导致CSS背景不能显示。

2、边框不能撑开
如上图中,如果父级设置了CSS边框属性(css border),由于子级里使用了float属性,产生浮动,父级不能被撑开,导致边框不能随内容而被撑开。

3、margin padding设置值不能正确显示
由于浮动导致父级子级之间设置了css padding、css margin属性的值不能正确表达。特别是上下边的padding和margin不能正确显示。

三、css解决浮动,清除浮动方法   -   TOP

这里DIVCSS5为了统一讲解浮动解决方法,假设了有三个盒子对象,一个父级里包含了两个子级,子级一个使用了float:left属性,另外一个子级使用float:right属性。同时设置div css border,父级css边框颜色为红色,两个子级边框颜色为蓝色;父级CSS背景样式为黄色,两个子级背景为白色;父级css width宽度为400px,两个子级css宽度均为180px,两个子级再设置相同高度100px,父级css height高度暂不设置(通常为实际css布局时候这样父级都不设置高度,而高度是随内容增加自适应高度)。

父级CSS命名为“.divcss5”对应html标签使用“<div class="divcss5">”
两个子级CSS命名分别为“.divcss5-left”“.divcss5-right”

根据以上描述DIVCSS5给出对应CSS代码HTML代码片段

CSS代码:


  
  
  1. .divcss5{ width:400px; border:1px solid #F00; background:#FF0} 
  2. .divcss5-left,.divcss5-right{ width:180px; height:100px; 
  3.  border:1px solid #00F; background:#FFF} 
  4. .divcss5-left{ float:left} 
  5. .divcss5-right{ float:right} 

对应html源代码片段:


  
  
  1. <div class="divcss5"> 
  2.     <div class="divcss5-left">left浮动</div> 
  3.     <div class="divcss5-right">right浮动</div> 
  4. </div> 

清除浮动前截图
清除浮动前案例截图父级需要清除浮动

以下DIVCSS5总结了几点用于清除浮动的经验教程

1、对父级设置适合CSS高度
对父级设置适合高度样式清除浮动,这里对“.divcss5”设置一定高度即可,一般设置高度需要能确定内容高度才能设置。这里我们知道内容高度是100PX+上下边框为2px,这样具体父级高度为102px

CSS代码:


  
  
  1. .divcss5{ width:400px;border:1px solid #F00;background:#FF0; height:102px} 
  2. .divcss5-left,.divcss5-right{width:180px;height:100px; 
  3. border:1px solid #00F;background:#FFF} 
  4. .divcss5-left{ float:left} 
  5. .divcss5-right{ float:right} 

Html代码不变。得到截图

CSS高度设置清除浮动法
使用height高度清除浮动

小结,使用设置高度样式,清除浮动产生,前提是对象内容高度要能确定并能计算好。

2、clear:both清除浮动
为了统一样式,我们新建一个样式选择器CSS命名为“.clear”,并且对应选择器样式为“clear:both”,然后我们在父级“</div>”结束前加此div引入“class="clear"”样式。这样即可清除浮动。

具体CSS代码:


  
  
  1. .divcss5{ width:400px;border:1px solid #F00;background:#FF0} 
  2. .divcss5-left,.divcss5-right{width:180px;height:100px; 
  3. border:1px solid #00F;background:#FFF} 
  4. .divcss5-left{ float:left} 
  5. .divcss5-right{ float:right} 
  6. .clear{ clear:both} 

Html代码:


  
  
  1. <div class="divcss5"> 
  2.     <div class="divcss5-left">left浮动</div> 
  3.     <div class="divcss5-right">right浮动</div> 
  4.     <div class="clear"></div> 
  5. </div> 

clear清除浮动截图

clear清除浮动截图
clear清除浮动截图 使用CSS clear清除浮动

这个css clear清除float产生浮动,可以不用对父级设置高度 也无需技术父级高度,方便适用,但会多加CSS和HTML标签。

3、父级div定义 overflow:hidden
对父级CSS选择器加overflow:hidden样式,可以清除父级内使用float产生浮动。优点是可以很少CSS代码即可解决浮动产生。

overflow:hidden解决CSS代码:


  
  
  1. .divcss5{ width:400px;border:1px solid #F00;background:#FF0; overflow:hidden} 
  2. .divcss5-left,.divcss5-right{width:180px;height:100px; border:1px solid #00F;background:#FFF} 
  3. .divcss5-left{ float:left} 
  4. .divcss5-right{ float:right} 

HTML代码不变。

解决清除浮动后截图

css overflow清除浮动截图
overflow清除float产生浮动截图 overflow:hidden清除浮动截图

为什么加入overflow:hidden即可清除浮动呢?那是因为overflow:hidden属性相当于是让父级紧贴内容,这样即可紧贴其对象内内容(包括使用float的div盒子),从而实现了清除浮动。Css overflow:hidden清除浮动方法DIVCSS5推荐使用。

以上三点即是兼容各大浏览器清除浮动的方法,其它有的浏览器不兼容有的不兼容的方法就没必要介绍了,大家记住以上三点解决float浮动清除浮动方法。但这里推荐第三点和第二点解决清除浮动方法。

本文转载自:http://www.divcss5.com/jiqiao/j406.shtml

单线程生物
粉丝 2
博文 48
码字总数 3187
作品 0
昌平
程序员
私信 提问
清除浮动的七种方式方法(实例代码讲解)

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

罗马教堂的钟声
2015/12/22
83
0
CSS中clear:both的理解

在CSS中我们会经常要用到“清除浮动”Clear,比较典型的就是clear:both; CSS手册上是这样说明的:该属性的值指出了不允许有浮动对象的边。这个属性是用来控制float属性在文档流的物理位置的。...

dhb_oschina
2013/08/15
206
0
【前端Talkking】 CSS系列——CSS深入理解之float浮动

float属性是CSS中常用的一个属性,在实际工作中使用的非常多,如果使用不当就会出现意料之外的效果。虽然很多人说浮动会用就行、浮动过时了,但是对于优秀的前端开发人员,需要有"刨根问底"...

micstone
2018/05/15
0
0
围住浮动元素的三种方法

方法一:为父元素添加 overflow:hidden 第一个方法很简单,缺点是不太直观,即为父元素应用 overflow:hidden ,以强制它 包围浮动元素。 方法二:同时浮动父元素 第二种促使父元素包围其浮动...

nibilly
2015/10/19
67
0
CSS float相关详解

float属性是CSS常用的一个属性,应用场景广泛,同时也是一个难点,涉及到一些相关细节及注意点。因此,就特别整理总结一下。 一、float介绍 float元素也称为浮动元素,设置了float属性的元素...

Ruheng
2017/12/05
0
0

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周六乱弹 —— 早上儿子问我他是怎么来的

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @凉小生 :#今日歌曲推荐# 少点戾气,愿你和这个世界温柔以待。中岛美嘉的单曲《僕が死のうと思ったのは (曾经我也想过一了百了)》 《僕が死の...

小小编辑
今天
2.2K
15
Excption与Error包结构,OOM 你遇到过哪些情况,SOF 你遇到过哪些情况

Throwable 是 Java 中所有错误与异常的超类,Throwable 包含两个子类,Error 与 Exception 。用于指示发生了异常情况。 Java 抛出的 Throwable 可以分成三种类型。 被检查异常(checked Exc...

Garphy
今天
38
0
计算机实现原理专题--二进制减法器(二)

在计算机实现原理专题--二进制减法器(一)中说明了基本原理,现准备说明如何来实现。 首先第一步255-b运算相当于对b进行按位取反,因此可将8个非门组成如下图的形式: 由于每次做减法时,我...

FAT_mt
昨天
40
0
好程序员大数据学习路线分享函数+map映射+元祖

好程序员大数据学习路线分享函数+map映射+元祖,大数据各个平台上的语言实现 hadoop 由java实现,2003年至今,三大块:数据处理,数据存储,数据计算 存储: hbase --> 数据成表 处理: hive --> 数...

好程序员官方
昨天
61
0
tabel 中含有复选框的列 数据理解

1、el-ui中实现某一列为复选框 实现多选非常简单: 手动添加一个el-table-column,设type属性为selction即可; 2、@selection-change事件:选项发生勾选状态变化时触发该事件 <el-table @sel...

everthing
昨天
21
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部