关于清除浮动的几个写法

1. .clear{clear:both;line-height:0;} ---》创建空标签来实现

2:

.clearfix:after {

content:"200B";

display:block;

height:0;

clear:both;

}

.clearfix {*zoom:1;}/*IE/7/6*/

(content:”200B”;这个参数,Unicode字符里有一个“零宽度空格”,即 U+200B,代替原来的“.”,可以缩减代码量。而且不再使用visibility:hidden。)

3:

.clearfix:before,.clearfix:after{

content:"";

display:table;

}

.clearfix:after{clear:both;}

.clearfix{

*zoom:1;/*IE/7/6*/

}

时间: 2024-08-08 21:56:30

关于清除浮动的几个写法的相关文章

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;

清除浮动最有效的css写法

说起来呢,基本上只要你给容器div加了float的属性,就需要清除浮动来使页面显示正常,那么,到底有什么方法可以让浮动轻松清除呢? 可以用display:flex;替代,但是它对IE8,9支持不是很好,所以不怎么这么用. 1.在容器div的里面结束标记之前写如下这样的div这段代码: <div style="clear:both"></div> 虽然通俗易懂,容易掌握,但是在页面中加入了一个无意义的空标签,违背了结构和表现分离的web标准的精髓,如果页面空标签多

关于清除浮动

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

前端之旅HTML与CSS篇之清除浮动塌陷

以下内容为转载. 方法1:给浮动的元素的上级添加高度如果一个元素要浮动,那么它的祖先元素一定要有高度.高度的盒子,才能关住浮动.只要浮动在一个有高度的盒子中,那么这个浮动就不会影响后面的浮动元素.所以就是清除浮动带来的影响了.所以只需要给li的上级ul或者div设置一个height:40px:(只要是浮动元素的上级元素就可以.),那么第二个div就好挤下来,在第一个盒子下面显示出来.方法2:clear:both;但是在实际开发过程当中中,高度height很少出现.为什么?因为能被内容撑高!那也就

总结 清除浮动的四种常见方法

1.使用空标签清除浮动. 我用了很久的一种方法,空标签可以是div标签,也可以是P标签.这种方式是在需要清除浮动的父级元素内部的所有浮动元素后添加这样一个标签清除浮动,并为其定义CSS代码:clear:both.此方法的弊端在于增加了无意义的结构元素. ps:对于使用额外标签清除浮动(闭合浮动元素),是W3C推荐的做法.至于使用<br />元素还是空<div></div>可以根据自己的喜好来选(当然你也可以使用其它块级元素).不过要注意的是,<br />本身

1 background(复合属性)与font(复合属性) 2 行内块的间距问题 3 行内元素的margin 4 清除浮动 5定位的元素的层级 6 Border-radius: 边框半径

1 background(复合属性)与font(复合属性): background: 颜色  图片的链接  是否平铺  背景位置 是否滚动.(可以随意调动或省略) Font: 粗度 字体风格 字体大小/行高 字体样式 字体大小和样式不可省略 2 行内块的间距问题 行内块元素相邻时,行内块元素之间会有几像素的间距,只有通过浮动解决. 3 行内元素的margin 行内元素的上下外边距不起作用,左右起作用. 4 清除浮动 给父盒子设置一个高度     Clear: both      Overflow

2016.7.23 清除浮动

1.给父盒子设置高度 2.给父盒子设置overflow:hidden; 3.给父盒子的最后面加一个div,这个div有个属性:clear:both; 4.使用伪元素清除浮动 .clearfix{ zoom:1;/*IE/7/6*/ /*兼容IE6下的写法*/ } .clearfix:after{ content:""; line-height:0; width:0; height: 0; display:block; visibility:hidden; clear:both; } 5

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

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

浮动布局所带来的影响以及如何清除浮动

在页面的布局过程中浮动是个好东西,我们经常会用到浮动布局,它可以使元素共享一行,极大的方便了我们的布局过程.但是很多人可能只是会用,对浮动的原理只是一知半解,如果没有清晰的认识到浮动所带来的影响以及如何清除浮动所带来的影响,那么面对代码量庞大的页面将会变得一头雾水.所以接下来我们来深入学习一下浮动布局,相信大家把浮动这个概念掌握的很清晰的时候,以后运用起来将会更加得心应手. 一. 什么是浮动布局? CSS 的 Float(浮动),会使元素向左或向右移动,使元素共享一行,类似于给元素加了inlin