CSS清除浮动float方法总结
使用浮动造成的BUG:
使用浮动前:(子节点是将父节点撑开了)
代码如下
<div class="box">
<div class="d1">1</div>
<div class="d2">2</div>
</div>
.box{
border: 1px solid black;
margin: 50px auto;
padding: 50px;
color: #fff;
}
.d1{
float: left;
background: purple;
width: 100px;
height: 100px;
}
.d2{
float: left;
background: #9c3;
width: 100px;
height: 100px;
}
首先说明现象:我没有给父节点设置高度,在给子div设置float:left后,出现如下BUG:
1.父节点的margin属性失效 2.子节点没有将父节点撑开
那么,我们该怎么解决这样由浮动造成的bug呢?
三种方法:
一、:after的3行代码(最高大上的方法,写情书的感觉哟)
原理:利用:after和:before在元素内插入两个元素块(其实就是在节点本身构造出两个存在于Render Tree的节点),从而达到清除浮动的效果。
代码如下:(有点三行情书的意思。。嘿嘿)
.box:after{
clear: both;
content: '';
display: block;
}
清除后效果:(实现父节点被撑开,子节点浮动效果)
二、添加新的节点,使用clear:both方法(跟:after大同小异,实现上略有区别)
先看代码:
<div class="box">
<div class="d1">1</div>
<div class="d2">2</div>
<div class="clc"></div>
</div>
.clc{
clear: both;
}
咱们就在父节点中增加一个节点,然后在该节点中设置clear:both属性,就可以清除浮动了。
三、在父节点上设置一个新类名,然后在类名css中设置overflow:auto
先看代码:
<div class="box over-flow">
<div class="d1">1</div>
<div class="d2">2</div>
<!-- <div class="clc"></div> -->
</div>
.over-flow{
overflow: auto;
}
这样也可以清除浮动,其原理是使用overflow属性来清除浮动,overflow有三个值:auto| hidden | visible,我们可以使用 hidden和
auto来清除浮动,但绝不可以使用 visible 清除浮动,使用这个值达不到效果。
浮动产生Bug原因:
当一个内层元素是浮动的时候,如果没有关闭浮动,其父元素也就不会再包含这个浮动的内层元素,因为此时浮动元素已经脱离了文档流。也就是为什么外层不能被撑开了!
总结:今天在这里总结了三种比较常见的清除浮动的方法,对于浏览器来说,也并不是每种都可以很好的兼容,所以各位在使用这三种方法
的时候还是看实际效果为主。
CSS清除浮动float方法总结的更多相关文章
- css清除浮动float方法
转载:http://www.cnblogs.com/ForEvErNoME/p/3383539.html 什么是CSS清除浮动? 在非IE浏览器(如Firefox)下,当容器的高度为auto,且容器的 ...
- 【转】css清除浮动float的三种方法总结,为什么清浮动?浮动会有那些影响?
摘要: css清除浮动float的三种方法总结,为什么清浮动?浮动会有那些影响? 一.抛一块问题砖(display: block)先看现象: 分析HTML代码结构: <div class ...
- css清除浮动float的几种方法
摘要: css清除浮动float的三种方法总结,为什么清浮动?浮动会有那些影响? 一.抛一块问题砖(display: block)先看现象: 这里我没有给最外层的DIV.outer 设置高度, ...
- CSS清除浮动的方法
CSS清除浮动的方法有哪些呢?经常性地会使用到float,很多邪门的事儿都有可能是浮动在作怪,清除浮动是必须要做的,而且随时性地对父级元素清除浮动的做法也被认为是书写CSS的良好习惯之一.下面看今天的 ...
- css清除浮动float
css清除浮动float 1.分析HTML代码 <div class="outer"> <div class="div1">1</ ...
- 前端开发CSS清除浮动的方法有哪些?
在前端开发过程中,非IE浏览器下,当容器的高度自动,并且容器内容中有浮动元素(float为left或right),此时如果容器的高度不能自适应内容的高度,从而使得内容溢出破坏整体布局,这种现象叫做浮动 ...
- css清除浮动的方法汇总
这是在其他地方看到的一篇文章,汇总的不错,摘过来做个记录. 引用地址 : http://www.cnblogs.com/ForEvErNoME/p/3383539.html ------------- ...
- 8种CSS清除浮动的方法优缺点分析
为什么清除CSS浮动这么难? 因为浮动会使当前标签产生向上浮的效果,同时会影响到前后标签.父级标签的位置及 width height 属性.而且同样的代码,在各种浏览器中显示效果也有可能不相同,这样让 ...
- CSS清除浮动各种方法
当容器的高度为auto,且容器的内容中有浮动(float为left或right)的元素,在这种情况下,容器的高度不能自动伸长以适应内容的高度,使得内容溢出到容器外面而影响(甚至破坏)布局的现象.这个现 ...
随机推荐
- java多线程实现方式
一.什么是线程? 线程:程序中一个单一的顺序控制流程.进程内一个相对独立的.可调度的执行单元,是系统独立调度和分派CPU的基本单位. 多线程:单个程序中同时运行多个线程完成不同的工作,称为多线程. 特 ...
- Windows Server 2003安装方法
1. 设置BIOS,从光驱引导启动.光盘放入光驱,自动读盘,选择第一项“安装Windows Server 2003,Enterprise Bdition”: 2. 弹出加载安装文件界面. 3. 出现安 ...
- java中File类的使用
public class FileLei { public static void main(String[] args) throws IOException { //..表示上 ...
- Linux系统sar命令解析
安装 如果系统没有该命令请安装: apt-get install sysstat yum install sysstat 安装完毕: vi /etc/default/sysstat ENABLED=& ...
- 初识Message Queue之--基础篇
之前我在项目中要用到消息队列相关的技术时,一直让Redis兼职消息队列功能,一个偶然的机会接触到了MSMQ消息队列.秉着技术还是专业的好为原则,对MSMQ进行了学习,以下是我个人的学习笔记. 一.什么 ...
- c#下volatile关键字
volatile多用于多线程的环境,当一个变量定义为volatile时,读取这个变量的值时候每次都是从momery里面读取而不是从cache读.这样做是为了保证读取该变量的信息都是最新的,而无论其 ...
- MySQL 一致性读 深入研究
一致性读,又称为快照读.使用的是MVCC机制读取undo中的已经提交的数据.所以它的读取是非阻塞的. 相关文档:http://dev.mysql.com/doc/refman/5.6/en/innod ...
- Redis学习笔记~Redis事务机制与Lind.DDD.Repositories.Redis事务机制的实现
回到目录 Redis本身支持事务,这就是SQL数据库有Transaction一样,而Redis的驱动也支持事务,这在ServiceStack.Redis就有所体现,它也是目前最受业界认可的Redis ...
- Scala初入
何为Scala物 Scala为基于JVM虚拟机中的面向对象与函数式编程思想并且完全兼容Java的混合编程语言,可以是Scala与Java是同根同源的,既然Scala与JAVA都是基于JVM之上的编程语 ...
- 将Centos的yum源更换为国内的阿里云源
阿里云是最近新出的一个镜像源.得益于阿里云的高速发展,这么大的需求,肯定会推出自己的镜像源.阿里云Linux安装镜像源地址:http://mirrors.aliyun.com/ CentOS系统更换软 ...