推荐几种好用的清除浮动方法:

方法1:

    .clearfix:after {
content:".";
display:block;
height:;
clear:both;
visibility:hidden;
}
.clearfix{*+height:1%;}

方法2:

    .clearfix:after {
content:"\200B";
display:block;
height:;
clear:both;
}
.clearfix {*zoom:;}/*IE/7/6 */
/* content:"\200B";这个参数,Unicode字符里有一个“零宽度空格”,即 U+200B,代替原来的“.”,可以缩减代码量。而且不再使用visibility:hidden。 */

方法3:

    .clearfix {
overflow:auto;
_height:1%;
}

方法4:

    .clearfix {
overflow:hidden;
_zoom:;
}

css清除浮动的几种方法的更多相关文章

  1. [Web 前端] 018 css 清除浮动的四种方法

    清除浮动的四种方法 加 clear: ...(见例1) 父级上增加属性 overflow:hidden(见例2.1) 在最后一个子元素的后面加一个空的 div,给它一个样式属性 clear: both ...

  2. 活学活用,CSS清除浮动的4种方法

    清除浮动这个问题,做前端的应该再熟悉不过了,咱是个新人,所以还是记个笔记,做个积累,努力学习向大神靠近. CSS清除浮动的方法网上一搜,大概有N多种,用过几种,说下个人感受. 1.结尾处加空div标签 ...

  3. css清除浮动的几种方法整理

    四种清除浮动方法如下: 1.使用空标签清除浮动.空标签可以是div标签,也可以是P 标签.这种方式是在需要清除浮动的父级元素内部的所有浮动元素后添加这样一个标签 清除浮动,并为其定义CSS代码:cle ...

  4. css清除浮动的8种方法以及优缺点

    浮动会使当前标签产生上浮的效果,同时会影响到前后的标签.父级标签的位置及width height 属性.而且同样的代码,在各种浏览器中效果可能不同,这样让清除浮动更难了.清除浮动引起的问题有很多的方法 ...

  5. CSS 清除浮动的4种方法

    此为未清除浮动源代码,运行代码无法查看到父级元素浅黄色背景.<style type=”text/css”> <!– *{margin:0;padding:0;} body{font: ...

  6. CSS 清除浮动的几种方法

    导读: CSS 的 Float(浮动),会使元素向左或向右移动,其周围的元素也会重新排列,Float(浮动),往往是用于图像,使得文字围绕图片的效果,而它在布局时一样非常有用.不过有利也有弊,使用浮动 ...

  7. CSS 清除浮动的四种方法

    在实际项目中,我们经常会用到float属性来对页面进行布局.当使用float时,意味着该元素已经脱离了文档流,相当于浮于文档之上,不占据空间.但是针对兄弟元素为文字内容时,会占据一定空间,从而产生文字 ...

  8. CSS读书笔记(3)---清除浮动的几种方法

    浮动元素容易造成页面错位现象.下面说说关于清除浮动的几种方法. 首先.先创建一个浮动导致错位的页面. <!DOCTYPE html> <html lang="en" ...

  9. [css]浮动-清除浮动的3种方法

    清除浮动的方法: 内墙法 注: 这是个奇淫技巧,没什么原理可言,记住即可 这个技巧又使得父box重新可以被子box撑开高度了. 隔墙法-适用于2个box之间上下排列 由于2个box高度依旧是0, 彼此 ...

随机推荐

  1. mysql 100%占用的解决

    早上客户反应,其网站无法访问,无限转圈 上服务器,查看磁盘空间df -h,内存使用率free -m,网络流量iftop均正常 然后使用top查看时,发现mysql的cpu使用率上升到200%. 解决过 ...

  2. php操作redis--字典(hash)篇

    常用函数:hSet,hGet,hGetAll等. 应用场景:存储用户信息对象数据,包括id,姓名,年龄和生日,通过用户id来获取姓名,年龄等信息. 连接 $redis = new Redis(); $ ...

  3. mysql字段类型不是整型的排序问题

    今天想按从小到大的顺序重数据库提取数据,发现取出的数据不是按顺序排的,经检查之后发现是mysql保存的字符类型是varchar,但是值是整数,解决办法:把排序字段+0; SELECT * FROM u ...

  4. leetcode-162周赛-1253-重构二进制矩阵

    题目描述: 自己的提交: class Solution: def reconstructMatrix(self, upper: int, lower: int, colsum: List[int]) ...

  5. luoguP3806 【模板】点分治1 [点分治]

    题目背景 感谢hzwer的点分治互测. 题目描述 给定一棵有n个点的树 询问树上距离为k的点对是否存在. 输入输出格式 输入格式: n,m 接下来n-1条边a,b,c描述a到b有一条长度为c的路径 接 ...

  6. vue 和 react 常用包(插件、组件 或 工具)

    vue 和 react  都可以使用的包(只是 纯 js 功能的包) 1.qs : https://blog.csdn.net/sansan_7957/article/details/82227040 ...

  7. 牛客Another Distinct Values

    题目 我一开始试了一下n=3,发现不行,于是就猜测只有2可以,交了一发,通过了50%.所以我猜测只有偶数可以,奇数都不行. 中间空白部分放n=2的情况就行.因为n=2的情况时,最大只有2,所以我们可以 ...

  8. Java简单从文件读取和输出

    Java简单从文件读取和输出 用Scanner输入,用PrintStream输出 功能:从in.txt读入,输出到out.txt 代码: package ioTest; import java.io. ...

  9. 兼容软件,Wine安装,Crossover安装,

    EL6 (RHEL6 and SL6) Required packages for proper building of 32-bit Wine on 64-bit EL6 yum install - ...

  10. leetcode.数组.16最接近的三数之和-java

    1. 具体题目 给定一个包括 n 个整数的数组 nums 和 一个目标值 target.找出 nums 中的三个整数,使得它们的和与 target 最接近.返回这三个数的和.假定每组输入只存在唯一答案 ...