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

方法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. 【JZOJ6431】【luoguP5658】【CSP-S2019】括号树

    description analysis 用栈维护一下树上路径未匹配的左括号,然后在树上找右括号匹配,设\(f[i]\)为\(i\)节点的贡献,\(g[i]\)是答案 为左括号可以直接继承父节点的信息 ...

  2. Dart编程实例 - 相等和关系操作符

    Dart编程实例 - 相等和关系操作符 void main() { var num1 = 5; var num2 = 9; var res = num1>num2; print('num1 gr ...

  3. Repeatable Read

    在Repeatable Read隔离级别下,一个事务可能会遇到幻读(Phantom Read)的问题. 幻读是指,在一个事务中,第一次查询某条记录,发现没有,但是,当试图更新这条不存在的记录时,竟然能 ...

  4. lvs+keepalived+mariadb集群

    1.环境准备节点1:172.16.2.95节点2:172.16.2.160节点3:172.16.2.220LVS1:172.16.2.67LVS2:172.16.2.234 2.mariadb集群的安 ...

  5. 使用HBuilder编辑器进行真机调试运行时提示Waiting for debugger!

    在使用HBuilder编辑器创建mui项目进行真机调试的时候,手机总是提示Waiting for debugger! 现在终于找到了解决办法: 手机 设置 -> 开发人员选项 -> USB ...

  6. webogic基本使用

    文章目录 启动 注入 部署应用: 访问 启动 /root/Oracle/Middleware/user_projects/domains/weblogic/bin/startWebLogic.sh 上 ...

  7. IceCTF-Matrix

    解题思路: 参考了鸽子小姐姐的脚本:https://zhuanlan.zhihu.com/p/22678856 具体题目就不贴了. 题目中提示将问题图像化,猜测是将这些16进制数转化为图像,尝试将16 ...

  8. Vue 学习笔记之 —— 表单输入绑定

    Vue 中文文档 https://cn.vuejs.org/ 不多说,直接上干货. v-model 指定,用来在input textarea 等表单元素上创建双向数据绑定,负责监听用户的输入事件,以及 ...

  9. 剑指offer——72圆圈中最后剩下的数字

    题目描述 每年六一儿童节,牛客都会准备一些小礼物去看望孤儿院的小朋友,今年亦是如此.HF作为牛客的资深元老,自然也准备了一些小游戏.其中,有个游戏是这样的:首先,让小朋友们围成一个大圈.然后,他随机指 ...

  10. 常用内置模块(四)——subprocess、re

    常用模块(四) 一.subprocess模块 1.subprocess为子流程模块,用于执行系统命令,该模块在Python全栈开发中不常用 2.常用方法 run 返回一个表示执行结果的对象 call ...