CSS清除浮动的几种方式
浮动对页面的影响:
如果一个父盒子中有一个子盒子,并且父盒子没有设置高,子盒子在父盒子中进行了浮动,那么将来父盒子的高度为0.由于父盒子的高度为0,
下面的元素会自动补位,所以这个时候要进行浮动的清除(不要在浮动元素上清除浮动),不然浮动会造成父元素高度坍塌,同时浮动会脱离文档流,对整个页面布局有很大的影响
方式一:使用overflow属性来清除浮动
.ovh{
overflow:hidden;
}
先找到浮动盒子的父元素,再在父元素中添加一个属性:overflow:hidden,就是清除这个父元素中的子元素浮动对页面的影响.
注意:一般情况下也不会使用这种方式,因为overflow:hidden有一个特点,离开了这个元素所在的区域以后会被隐藏(overflow:hidden会将超出的部分隐藏起来).
方式二:使用额外标签法
.clear{
clear:both;
}
在浮动的盒子之下再放一个标签,在这个标签中使用clear:both,来清除浮动对页面的影响.
a.内部标签:会将这个浮动盒子的父盒子高度重新撑开.(内墙法)
b.外部标签:会将这个浮动盒子的影响清除,但是不会撑开父盒子(外墙法)
注意:一般情况下不会使用这一种方式来清除浮动。因为这种清除浮动的方式会增加页面的标签,造成结构的混乱.
方法三:使用伪元素来清除浮动
.clearfix:after{
content:"";//设置内容为空
height:0;//高度为0
line-height:0;//行高为0
display:block;//将文本转为块级元素
visibility:hidden;//将元素隐藏
clear:both//清除浮动
}
.clearfix{
zoom:1;为了兼容IE
}
方法四:使用双伪元素清除浮动
.clearfix:before,.clearfix:after {
content: "";
display: block;
clear: both;
}
.clearfix {
zoom: 1;
}
方法五:给浮动元素的祖先元素加高度(一般为父元素)
我们知道了高度塌陷是应为给浮动元素的父级高度是自适应导致的,那么我们给它的设置适当的高度就可以解决这个问题了。
缺点:在浮动元素高度不确定的时候不适用
方法六:父元素浮动
当父元素浮动的时候,无需为子元素的浮动清除浮动,布局时经常用到
缺点:消除了塌陷现象,但由于其父元素也发生了浮动故,其后元素若处于正常文档流,会被跌在底下,
另外,需要给每个浮动元素父级添加浮动,浮动多了容易出现问题
方法七:父元素处于绝对定位
缺点:与上一个方法同理,由于绝对定位已脱离正常文档流,故出现相同情况,解决办法可以使用以上办法结合,灵活多变
还有一些其他方法,在这就不多描述,以上差不多就是比较常用的清除浮动的方法。
推荐:
在网页主要布局时使用:after伪元素方法并作为主要清理浮动方式;在小模块如ul里使用overflow:hidden;(留意可能产生的隐藏溢出元素问题);
如果本身就是浮动元素则可自动清除内部浮动,无需格外处理;
最后可以使用相对完美的:after伪元素方法清理浮动,文档结构更加清晰。
CSS清除浮动的几种方式的更多相关文章
- css清除浮动的两种方式(clearfix和clear)
最近总是在用浮动,这两种方式总是浮现在眼前,或者说去掉父级和同级浮动样式总在思考中.两种方式怎么写都在base.css中. 在做瑞祥之旅的过程中,还是吃了一个大亏,就是清除浮动,不管是同级还是父级,都 ...
- css清除浮动的几种方式,哪种最合适?
细心的人可能发现了,写的导航条中存在一个问题,那就是使用了float之后,父级盒子的高度变为0了. 我们来写一个例子来看一下,创建一个父级div,并设置border属性,然后下边创建两个子元素span ...
- HTML/css清除浮动的几种方式
浮动在HTML/CSS布局中十分常见,虽然浮动布局可以实现很多有用的排版效果,但是浮动的元素脱离了文档流,可能造成包含块高度塌陷.下方行框上移等行为.因此在使用浮动实现想要的效果后,通常还需要清除浮动 ...
- css清除浮动的3种方式
前言: 当不给父元素设置宽高时,父元素的宽高会被子元素的内容撑开.但当子元素设置浮动属性(float) 后, 子元素会溢出到父元素外,父元素的宽高也不会被撑开,这称之为“高度塌陷”.可以理解为使用浮动 ...
- css 清除浮动的几种方式
1.给浮动的元素的父级添加 overflow:hidden;属性 ul>不浮动 添加overflow:hidden; li>浮动 2.给浮动的元素的父级添加after伪类 ul:after ...
- 【css】清除浮动的几种方式
[css]清除浮动的几种方式 因为浮动框不在普通的文档流中,所以它不占据空间.如下面的代码: .news { background-color:gray; border:1px solid bla ...
- css考核点整理(一)-浮动的理解和清除浮动的几种方式
浮动的理解和清除浮动的几种方式 clear语法:clear : none | left | right | both 取值:none : 默认值.允许两边都可以有浮动对象left : 不允许左边有浮动 ...
- 前端老司机常用的方法CSS如何清除浮动?清除浮动的几种方式
在前端开发过程中,我们经常会使用到浮动(float),这个我们即爱又恨的属性.爱,是因为通过浮动,我们能很方便地进行布局:恨,是因为浮动之后遗留下来太多的问题需要解决.下面本篇文章给大家介绍CSS清除 ...
- 活学活用,CSS清除浮动的4种方法
清除浮动这个问题,做前端的应该再熟悉不过了,咱是个新人,所以还是记个笔记,做个积累,努力学习向大神靠近. CSS清除浮动的方法网上一搜,大概有N多种,用过几种,说下个人感受. 1.结尾处加空div标签 ...
随机推荐
- Intellij Idea配置MapReduce编程环境
原文参考地址:http://www点w2bc点com/article/229178 增加内容:question1: Hadoop2以上版本时,在Hadoop2的bin目录下没有winutils.exe ...
- 【CSS3】颜色表示方式
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- loadrunner录制、加载以及分析过程
loadrunner主要组件包括: Virtual User Generator(录制脚本,编写脚本直到调通) Controller(加载脚本,设计并发人数.监控点之类的,模拟场景,开始性能测试,最后 ...
- 创建access数据库表demo的封装
1.创建类 public void CreateBiao(ADOX.Catalog catlog,ADOX.Table table) { //StuId Column(AutoIncrement ) ...
- php trim源码分析
本文同时发表于https://github.com/zhangyachen/zhangyachen.github.io/issues/9 核心代码如下: /* {{{ php_trim() * mod ...
- 669. Trim a Binary Search Tree
Given a binary search tree and the lowest and highest boundaries as `L`and `R`, trim the tree so t ...
- 如果没有UX经验,如何创建个人UX作品集?
以下内容由Mockplus团队翻译整理,仅供学习交流,Mockplus是更快更简单的原型设计工具. 一直以来,这是设计行业的悖论. 当今,许多活跃于我们用户体验行业的专业人士在开始个人职业生涯时都面临 ...
- js垃圾回收机制
垃圾回收机制,简称GC(garbage collection),会定期(周期性)地回收那些不再使用的变量,然后释放其内存. 而内存占用的情况有很多: 1.变量 2.字面量对象声明:var obj = ...
- 原来你是这样的JAVA[02]-包、传参、构造器
一.包(package) 在java程序中,一个java源文件称为编译单元,以.java后缀命名.编译单元内可以有一个public类,类名必须与文件名相同.注意:每个编译单元只能有一个public类. ...
- HMM Viterbi算法 详解
HMM:隐式马尔可夫链 HMM的典型介绍就是这个模型是一个五元组: 观测序列(observations):实际观测到的现象序列 隐含状态(states):所有的可能的隐含状态 初始概率(start ...