clearfix--清除浮动

 1 .clearfix {
 2   zoom: 1;
 3   display: table;
 4   width: 100%;
 5 }
 6 .clearfix:after {
 7   content: " ";
 8   display: block;
 9   clear: both;
10   height: 0;
11 }

原文：http://www.45eggs.com/xhtml-css/2011/css-clearfix.html

时间： 2024-11-05 04:01:07

clearfix--清除浮动的相关文章

clearfix清除浮动进化史

我想大家在写CSS的时候应该都对清除浮动的用法深有体会,今天我们就还讨论下clearfix的进化史吧. clearfix清除浮动首先,我们常用的清除浮动是这样的. .clear{clear:both;line-height:0;} 这是相当暴力有效的解决浮动的问题.但是这个用法有一个致命伤,就是每次清除浮动的时候都需要增加一个空标签来使用.这种做法如果在页面复杂的布局要经常清楚浮动的时候就会产生很多的空标签,增加了页面无用标签,不利于页面优化. 因此有很多大神就研究出了 clearf

clearfix清除浮动

首先在很多很多年以前我们常用的清除浮动是这样的. 1 .clear{clear:both;line-height:0;} 现在可能还可以在很多老的站点上可以看到这样的代码,相当暴力有效的解决浮动的问题.但是这个用法有一个致命伤,就是每次清除浮动的时候都需要增加一个空标签来使用. 这种做法如果在页面复杂的布局要经常清楚浮动的时候就会产生很多的空标签,增加了页面无用标签,不利于页面优化.但是我发现大型网站中居然还在使用这种清楚浮动的方法.有兴趣的同学可以上他们首页搜索一下他们的.blank0这个样

css用clearfix清除浮动

什么是.clearfix .clearfix:after { content: "."; /*内容为"."就是一个英文的句号而已.也可以不写.*/ display: block; /*加入的这个元素转换为块级元素.*/ clear: both; /*清除左右两边浮动.*/ visibility: hidden; /*可见度设为隐藏.注意它和display:none;是有区别的.visibility:hidden;仍然占据空间,只是看不到而已:*/ line-heig

clear-fix清除浮动的两种写法

1. [代码]clearfix 清除浮动 .clearfix:after { content: "."; display: block; height: 0; font-size: 0; clear: both; visibility: hidden; } .clearfix { zoom: 1; } 2. [代码]clearfix的另一种写法 .clearfix:after { content: "."; display: block; clear: both;

.clearfix 清除浮动，@import

我们知道,在网页的DIV+CSS布局中,很多时候要用到浮动. 既然有浮动,那就有清除浮动. 清除浮动有很多种方式,而在实际项目中,比较常用的是这一种. .clearfix:after { content: ""; display: block; clear: both; } .clearfix { zoom: 1; } 我们可以把这部分代码复制到项目中的CSS文件中,也可以保存为一个CSS文件,然后引入. 那么怎么引入呢?这时,我们就需要用到 @import. @import url(

css中clearfix清除浮动的用法及其原理示例介绍

clearfix的定义: .clearfix:after {}{ content: "."; /**//*内容为“.”就是一个英文的句号而已.也可以不写.*/ display: block; /**//*加入的这个元素转换为块级元素.*/ clear: both; /**//*清除左右两边浮动.*/ visibility: hidden; /**//*可见度设为隐藏.注意它和display:none;是有区别的.visibility:hidden;仍然占据空间,只是看不到而已:*/ l

清除浮动clearfix

css用clearfix清除浮动更多2013/11/4 来源:css学习浏览量:11901 学习标签: css clearfix 本文导读:写css 时总为浮动而烦恼,如果用了浮动,浮动的父层不会跟着浮动框的高度增加而增加,在Firefox等符合W3C标准的浏览器中,如果有一个DIV作为外部容器,内部的DIV如果设置了float样式,则外部的容器DIV因为内部没有clear,导致不能被撑开.这个时候我们可以用clearfix清除浮动什么是.clearfix CSS 代码复制 .clea

css清除浮动的两种方式（clearfix和clear）

最近总是在用浮动,这两种方式总是浮现在眼前,或者说去掉父级和同级浮动样式总在思考中.两种方式怎么写都在base.css中. 在做瑞祥之旅的过程中,还是吃了一个大亏,就是清除浮动,不管是同级还是父级,都没清除浮动,导致经常会有div包不住子级的东西(经常一审查height=0).现利用两例子来巩固下. <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"

关于清除浮动

晚上本来想去苹果官网看看新产品,顺便看看高大上的视频,进入之后,习惯性的打开了审查元素,然后就开始研究起了苹果的代码看到图片列表,有这样一段: 就是下面这三行代码: .promos ul:after { clear: both; } .promos ul:before, .promos ul:after { content: ' '; display: table; } bootstrap也是这种写法. 很显然,是用来清除浮动的,和小伙伴聊了一下,说到几个有意思的地方. 说的最多的就是dis

清除浮动塌陷的4种经典套路

原文地址;http://www.cnblogs.com/chedabang/p/5973601.html "自古深情留不住,总是套路得人心."这些日子,各个朋友圈随时可以见到这句话的身影.的确人们常说:"多一点真诚,少一点套路.",但是最终现象写实也是那么残酷和无奈. 同样在前端攻城狮的道路,我们都是真诚尽心尽力的去学习进取.奈何先是各大浏览器厂商的大战不断,导致我们这群学习的人苦不堪言,一片水生火热呀.不得不想进各种hack方法解决.(没错,这里就是吐槽的IE6!