block一般一个块占一行,除非float
inline是自动排为一行,就象段内的文字一样,可成为多行。
clear:both
语法:clear : none | left |right | both
none : 允许两边都可以有浮动对象
both : 不允许有浮动对象
left : 不允许左边有浮动对象
right : 不允许右边有浮动对象
说明:该属性的值指出了不允许有浮动对象的边。请参阅float属性。
!important 具有优先权,提升指定样式规则的应用优先权。
示例:div { color:red!important }
display:inline|block
display:inline比较经典的用法是用在 <ul> 下的 <li> 中
display:inline 对应不显示为 display:none
display:block 对应不显示为 hidden
说通俗点样式为none的元素不占位置,而样式为hidden的元素虽然不显示但还是占地方
1.传统处理方式:
li {float:left;}/*这样,对固定宽度导航条来说,li不能自动居中*/
2.inline-block方式:
ul {text-align:center;font-family:simsun;font-size:14px;}
li {display:inline-block;*display:inline;zoom:1;margin-right:-0.5em;
*margin-right:0;}
a{display:block;}
/*行内显示并且水平居中;
display:inline;zoom:1;是对ie的hack,
margin-right:0.5em是对现代浏览器去缝
*/
浏览器FireFox,Chrome下,li之间有缝隙,Google得知缝隙由字体大小产生,所以另外加入hack来除缝
关于zoom:1;的作用,可以看下帮助文档,地址:http://www.yesky.com/imagesnew/software/css/css2/c_zoom.html
而这两种实现方法中,float:left要比display:inline;的表现方式要好。因为内联(display:inline;)
属于行布局,其特性是在一行里进行布局,所以不能被设定宽高。块级元素的布局相对于内联样式要精
确的多。所以尽量使用float:left;
当我们使用float:left后,发现父级元素的div没有被撑开了. 通常情况下要清理浮动.这也是我们公司现在所使用的方法. 如
<div> <ul style="float:left"> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> </ul> <!--需要清理浮动--> <div style="clear:both"></div> </div>
用了很久这样的方法,每次写Repeater绑定的时候都要加个<div style="clear:both"></div>的标签,以
前没有注意到这方面的东西.今天重新写样式的时候,就上网搜了下替代的方法.果然在Google中搜到了一
篇How To Clear Floats Without Structural Markup的文章,灵活的处理了清空浮动的问题
首先设置代码为:
.clearfix:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
这样我们只要对父级div引入这个clearfix的类即可,即
<div class="clearfix" > <ul style="float:left"> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> </ul> </div>
这个css的原理是经过使用after伪对象,它将在应用clearfix的元素结尾添加content中的内容,也就是一
个".",并且把他设置为块级元素(display="block");高度设置为0,clear="both",然后将其内容隐藏掉
(visibility="hidden").这样就会撑开此块级元素.
但是,IE并不支持.所以如果你需要兼容IE浏览器的话,可以设定以个Hack.
.clearfix:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
* html .clearfix {zoom:1;}
这样我们就可以只在父级div引用class类解决了繁琐的清空步骤.
下面给出别的网站清空浮动的代码:
/* 豆瓣的clear both方式 */
.clearfix:after {
content: “.”;
display:block;
height:0;
clear:both;
visibility:hidden
}
.clearfix {
zoom: 1;
display: inline-block;
_height: 1px
}
*html .clearfix { height: 1% }
*+html .clearfix { height: 1% }
.clearfix { display: block }
CSS hack 用来让网页兼容各种浏览器(在各种环境下都能“正确的”显示)
*+html 与 *html 是IE特有的标签, firefox 暂不支持.而*+html又为IE7特有标签.
/*虾米的方式*/
.clearfix:after{
content:”.”;
display:block;
height:0;
clear:both;
visibility:hidden;
}
直接copy下bootstrap里面的clearfix写法:
.clearfix {
*zoom: 1;
}
.clearfix:before, .clearfix:after {
display: table;
line-height: 0;
content: "";
}
.clearfix:after {
clear: both;
}
.clearfix{zoom:1;}
在一个有float 属性元素的外层增加一个拥有clearfix属性的div包裹,可以保证外部div的height,即
清除"浮动元素脱离了文档流,包围图片和文本的 div 不占据空间"的问题。
看到”闲聊CSS之关于clearfix–清除浮动“ (http://www.indievox.com/e2ghost/post/50238)的文章给
了一个比较清晰的分析:
构成Block Formatting Context的方法有下面几种:
float的值不为none。
overflow的值不为visible。
display的值为table-cell, table-caption, inline-block中的任何一个。
position的值不为relative和static。
很明显,float和position不合适我们的需求。那只能从overflow或者display中选取一个。
因为是应用了.clearfix和.menu的菜单极有可能是多级的,所以overflow: hidden或overflow: auto也不
满足需求
(会把下拉的菜单隐藏掉或者出滚动条),那么只能从display下手。
我们可以将.clearfix的display值设为table-cell, table-caption, inline-block中的任何一个
但是display: inline-block会产生多余空白,所以也排除掉。
剩下的只有table-cell, table-caption,为了保证兼容可以用display: table来使.clearfix形成一个Block Formatting Context因为display: table会产生一些匿名盒子,这些匿名盒子的其中一个(display值为table-cell)会形成Block Formatting Context。这样我们新的.clearfix就会闭合内部元素的浮动。
这就是为什么选择display:table的原因。
firefox不支持float:right
<button class="vjs-fullscreen-control vjs-control vjs-button" type="button" aria-live="polite" title="Fullscreen" aria-disabled="false"></button> <div class="vjs-volume-menu-button vjs-menu-button vjs-menu-button-inline vjs-control vjs-button vjs-volume-menu-button-horizontal vjs-vol-3" title="Mute" aria-disabled="false"></div>
/********replace float:right********************/ .vjs-default-skin .vjs-volume-menu-button{ position:absolute; right:0; top:0; margin-right: 4em; } .vjs-default-skin .vjs-fullscreen-control{ position:absolute; right:0; top:0; } /*.vjs-default-skin .vjs-volume-menu-button{ float:right; margin-right: 4em; } .vjs-default-skin .vjs-fullscreen-control{ float:right; }*/ /*******replace float:right*********************/
相关推荐
主要介绍了CSS中使用clearfix清除浮动的方法,作者列出了几个clearfix的不同的使用方法进行对比,需要的朋友可以参考下
大家对css中clearfix并不陌生吧,它的作用就是清除浮动,下面对clearfix的定义及实现原理简要的为大家做个介绍,另外还有个不错的示例,喜欢的朋友不要错过
本文主要是讲解如何在 html 中使用 clearfix 和 clear,针对那些刚开始了解 css 的童鞋。关于 clearfix 和 clear 的样式在这里我就不写了。 下面就谈谈对于这两个 class 的用法,首先我们先看个例子: XML/HTML Code...
但这样增加了页面的结构的源代码,造成代码的拥肿,其实也可以有更好的办法, 在浮动元素的外包clearfix样式 复制代码代码如下: ”clearfix”> ”fl”></div> ”fr”></div> </div> .clearfix:after{ visibility:...
CSS Code复制内容到剪贴板 .clearfix:before, .clearfix:after { content:; display:table; } .clearfix:after{ clear:both; overflow:hidden; } .clearfix{ *zoom:1; } 如果外部有一个div...
在写HTML代码的时候,发现在Firefox等符合W3C标准的浏览器中,如果有一个DIV作为外部容器,内部的DIV如果设置了float样式,则外部的容器DIV因为内部没有clear,导致不能被撑开。看下面的例子: ...
今天回顾一下css中的清除浮动 复制代码代码如下: .clearfix:after{content:”.”;display:block;height:0;clear:both;visibility:hidden} /*所有主流浏览器都支持 :after 伪元素。*/ .clearfix{*+height:1%;}/*不...
清理浮动有很多种方式,像使用 br 标签自带的 clear 属,使用元素的 overflow,使用空标签来设置 clear:both 等等。但考虑到兼容问题和语义化的问题,一般我们都会使用如下代码来清理浮动。 复制代码代码如下:/* ...
分析:清除浮动大致有两种方案:clear、触发 BFC额外标签法: 在浮动元素平级的最后面添加额外元素,例如:<div class="clearfix"></d
如何在 html 中使用 clearfix 和 clear,针对那些刚开始了解 css 的童鞋,下面通过示例为大家介绍下这两个class 的用法
下面这段代码是用来清除浮动带来的高度塌陷问题 .clearfix:before { content: "."; display: block; height: 0; clear: both; visibility: hidden; } Question 1: 上面的代码的能够实现清除浮动的问题吗? ...
复制代码代码如下: .clearfix:after { visibility: hidden; display: block; font-size: 0; content: ” “; clear: both; height: 0; } .clearfix { display: inline-table; } /* Hides from IE-mac \*/ * ...
用css属性 清除浮动(clear) 解决 **清除浮动 clear** - 默认值:none - left:清除左浮动 该元素必须出现在前面所有左浮动盒子的下方 - right:清除右浮动 该元素必须出现在前面所有右浮动盒子的下方 - both:清除...