说起来呢,基本上只要你给容器div加了float的属性,就需要清除浮动来使页面显示正常,那么,到底有什么方法可以让浮动轻松清除呢? 
可以用display:flex;替代,但是它对IE8,9支持不是很好,所以不怎么这么用。

1.在容器div的里面结束标记之前写如下这样的div这段代码:

<div style="clear:both"></div>

虽然通俗易懂,容易掌握,但是在页面中加入了一个无意义的空标签,违背了结构和表现分离的web标准的精髓,如果页面空标签多的话,对于后期的维护会造成一定的困难。一般来说,现在已经不采用这种方法。

2.在浮动容器div的css样式中加入overflow属性。

3.将父元素也变成浮动元素,但是影响整个页面的布局,不推荐使用。

4.使用:after伪元素,一般增加clearfix的class,大概写法如下:

.clearfix:after{
content:".";/*加一段内容*/
display:block;/*让生成的元素以块级元素显示,占满剩余空间*/
height:0;/*避免生成的内容破坏原有布局高度*/
clear:both;/*清除浮动*/
visibility:hidden;/*让生成的内容不可见*/
}
.clearfix{zoom:1;/*为IE6,7的兼容性设置*/}

除了clear:both;是为了清除浮动以外,其他的属性就是为了隐藏这个元素,所以我们对它进行了改进一下:

 .clearfix:after,.clearfix:before{
content:".";/*加一段内容*/
display:table;/*创建匿名的表格单元,触发bfc*/
}
.clearfix:after{
clear:both;/*清除浮动*/
}
.clearfix{zoom:1;/*为IE6,7的兼容性设置*/}

.clearfix:before,加上before,对清除浮动没什么作用,防止浏览器顶部空白崩溃,也就是说,margin-top和上一个盒子的margin-bottom它们会发生一个叠加,这么做就是防止叠加,其实没有这个需要,去掉before也没啥问题。 
原理和第一种方法差不多,就是用clear:both;

使用的原理基本上就是触动bfc, 
bfc:block formating contexts 块级格式化上下文 
比如下面这些就是: 
float:left; 
overflow:auto; 
display:table-cell; 
display:table-caption; 
display:inline-block; 
position:fixed; 
position:absolute;

目前就是用最后的一种方式来进行清除浮动,毕竟优雅~~~

原文地址:https://blog.csdn.net/u012396955/article/details/60341523

清除浮动最有效的css写法的更多相关文章

  1. 父类清除浮动的原因、(清除浮动代码,置于CSS中方便调用)

    浮动因素在静态网页制作中经常被应用到,比如要让块级元素不独占一行,常常应用设置float的方式来实现.但是应用的时候会发现,设置了子类浮动后,未给父类清除浮动,这样就会造成一下问题: 1.浮动的元素会 ...

  2. CSS清除浮动技巧

    一般浮动是什么情况呢?一般是一个盒子里使用了CSS float浮动属性,导致父级对象盒子不能被撑开,这样CSS float浮动就产生了. 本来两个黑色对象盒子是在红色盒子内,因为对两个黑色盒子使用了f ...

  3. css用clearfix清除浮动

    本文从http://www.studyofnet.com/news/196.html复制.   本文导读:写css 时总为浮动而烦恼,如果用了浮动,浮动的父层不会跟着浮动框的高度增加而增加,在Fire ...

  4. [转]CSS clear both清除浮动

    DIV+CSS clear both清除产生浮动 我们知道有时使用了css float浮动会产生css浮动,这个时候就需要清理清除浮动,我们就用clear样式属性即可实现. 接下来我们来认识与学习cs ...

  5. 详说 CSS 清除浮动

    转自:http://kayosite.com/remove-floating-style-in-detail.html 浮动,从诞生那天起,它就是个特别的属性——既为网页布局带来新的方法,却又随之产生 ...

  6. CSS clear both清除浮动总结

    我们知道有时候使用了CSS float浮动,会产生CSS浮动,这个时候就需要清理浮动,我们就用clear样式属性即可实现. 接下来我们来认识与学习CSS clear知识与用法. clear清除浮动目录 ...

  7. 清除浮动clearfix

    css用clearfix清除浮动 更多2013/11/4 来源:css学习浏览量:11901 学习标签: css clearfix 本文导读:写css 时总为浮动而烦恼,如果用了浮动,浮动的父层不会跟 ...

  8. 前端面试题常考&必考之--清除浮动的方法

    浮动 问题:子元素设置了float后,脱离父元素,导致父元素无法撑开?(也就是子元素的高度没有过渡到父元素) 例子: 检查元素的效果: (三种)常用的解决办法: 1>额外标签法,添加一个空的di ...

  9. 细微之处:比较两种CSS清除浮动的兼容

    http://www.cnblogs.com/bienfantaisie/archive/2011/05/27/2059597.html 清除浮动是连续浮动元素之后的必备工作,在工作中我做到需要清除浮 ...

随机推荐

  1. JavaScript 模拟后台任务

    读书笔记,请勿转载,发布,产权不归我所有,归以前作者所有,我只是做读书笔记. /*! * Copyright 2015 Google Inc. All rights reserved. * * Lic ...

  2. C语言深度剖析自测题8解析

    #include <stdio.h> int  main(void) {    int  a[5] = {1, 2, 3, 4, 5}; int* ptr1 = (int*)(&a ...

  3. 万能媒体播放器 PotPlayer

    推荐一款超级牛逼播放器:PotPlayer

  4. 用u盘和iso镜像文件装win8.1系统

    版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/xyl295528322/article/details/37910939 原料: 1.老毛桃U盘启动 ...

  5. 一、Json

    一.Json遍历模糊查询 你没admin 所以这句话报错. //1.写法 dynamic query = from user in jsonObject where (user.ToString(). ...

  6. dictionary小项目代码管理

    软件项目开发流程 需求分析 ----> 概要设计  ---> 项目计划 ---->详细设计--->编码测试 -----> 项目测试 ---->调试修改 ---> ...

  7. Codeforces 1186F - Vus the Cossack and a Graph 模拟乱搞/欧拉回路

    题意:给你一张无向图,要求对这张图进行删边操作,要求删边之后的图的总边数 >= ceil((n + m) / 2), 每个点的度数 >= ceil(deg[i] / 2).(deg[i]是 ...

  8. 力扣——Reverse Nodes in k-Group(K 个一组翻转链表) python实现

    题目描述: 中文: 给你一个链表,每 k 个节点一组进行翻转,请你返回翻转后的链表. k 是一个正整数,它的值小于或等于链表的长度. 如果节点总数不是 k 的整数倍,那么请将最后剩余的节点保持原有顺序 ...

  9. UOJ197 线性规划

    传送门 由于这道题标程GG了所以必不可能AC嘛2333 单纯形法是一个很玄学的东西qwq 就是 非标准型 -> 标准型 -> 规范型 -> 松弛型 一个玄学操作——转轴操作(priv ...

  10. python 控制终端执行的subprocess.getoutput函数

    devices = subprocess.getoutput('ios-deploy -c') print(devices) 如上代码中,subprocess.getoutput函数首先在终端执行命令 ...