清除浮动最有效的css写法

说起来呢,基本上只要你给容器div加了float的属性,就需要清除浮动来使页面显示正常,那么,到底有什么方法可以让浮动轻松清除呢? 
可以用display:flex;替代,但是它对IE8,9支持不是很好,所以不怎么这么用。

1.在容器div的里面结束标记之前写如下这样的div这段代码:

<div style="clear:both"></div>

虽然通俗易懂,容易掌握,但是在页面中加入了一个无意义的空标签,违背了结构和表现分离的web标准的精髓,如果页面空标签多的话,对于后期的维护会造成一定的困难。一般来说,现在已经不采用这种方法。

2.在浮动容器div的css样式中加入overflow属性。

3.将父元素也变成浮动元素,但是影响整个页面的布局,不推荐使用。

4.使用:after伪元素,一般增加clearfix的class,大概写法如下:

.clearfix:after{
   content:".";/*加一段内容*/
   display:block;/*让生成的元素以块级元素显示,占满剩余空间*/
   height:0;/*避免生成的内容破坏原有布局高度*/
   clear:both;/*清除浮动*/
   visibility:hidden;/*让生成的内容不可见*/
  }
  .clearfix{zoom:1;/*为IE6,7的兼容性设置*/}

除了clear:both;是为了清除浮动以外,其他的属性就是为了隐藏这个元素,所以我们对它进行了改进一下:

 .clearfix:after,.clearfix:before{
   content:".";/*加一段内容*/
   display:table;/*创建匿名的表格单元,触发bfc*/
}
 .clearfix:after{
   clear:both;/*清除浮动*/
  }
 .clearfix{zoom:1;/*为IE6,7的兼容性设置*/}

.clearfix:before,加上before,对清除浮动没什么作用,防止浏览器顶部空白崩溃,也就是说,margin-top和上一个盒子的margin-bottom它们会发生一个叠加,这么做就是防止叠加,其实没有这个需要,去掉before也没啥问题。 
原理和第一种方法差不多,就是用clear:both;

使用的原理基本上就是触动bfc, 
bfc:block formating contexts 块级格式化上下文 
比如下面这些就是: 
float:left; 
overflow:auto; 
display:table-cell; 
display:table-caption; 
display:inline-block; 
position:fixed; 
position:absolute;

目前就是用最后的一种方式来进行清除浮动,毕竟优雅~~~

原文地址:https://blog.csdn.net/u012396955/article/details/60341523

原文地址:https://www.cnblogs.com/liyouwu/p/9024167.html

时间: 2024-10-08 13:48:05

清除浮动最有效的css写法的相关文章

CSS清除浮动技巧

一般浮动是什么情况呢?一般是一个盒子里使用了CSS float浮动属性,导致父级对象盒子不能被撑开,这样CSS float浮动就产生了. 本来两个黑色对象盒子是在红色盒子内,因为对两个黑色盒子使用了float浮动,所以两个黑色盒子产生了浮动,导致红色盒子不能撑开,这样浮动就产生了. 简单地说,浮动是因为使用了float:left或float:right或两者都是有了而产生的浮动. 二.浮动产生负作用 1.背景不能显示由于浮动产生,如果对父级设置了(CSS background背景)CSS背景颜色

CSS 浮动和清除浮动

CSS浮动和清除   float:让元素浮动,取值:left(左浮动).right(右浮动)   clear:清除浮动,取值:left(清除左浮动).right(清除右浮动).both(同时清除上面的左浮动和右浮动) 1.CSS浮动   浮动的元素,将向左或向右浮动,浮动到包围元素的边上,或上一个浮动元素的边上为止.   浮动的元素,不再占空间了,并且,浮动元素的层级要高于普通元素.   浮动的元素,一定是“块元素”.不管它原来是什么元素. 如果浮动的元素,没有指定宽度的话,浮动后它将尽可能的变

清除浮动clearfix

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

清除浮动clear:both的应用详解

清除浮动clear:both的应用详解 2008-03-30 19:47:14  来源:cnbruce 在CSS中我们会经常要用到“清除浮动”Clear,比较典型的就是clear:both; CSS手册上是这样说明的:该属性的值指出了不允许有浮动对象的边.这个属性是用来控制float属性在文档流的物理位置的. 当属性设置float(浮动)时,其所在的物理位置已经脱离文档流了,但是大多时候我们希望文档流能识别float(浮动),或者是希望float(浮动)后面的元素不被float(浮动)所影响,这

始于清除浮动、追溯到源头

如果你喜欢用浮动来进行布局,我深信,你肯定受过浮动带来的虐心.尽管我记得在张鑫旭大哥的某篇博文里看到过,浮动,其实并不是作为一种布局的手段,然后balabala,确实言之很有理.我也曾经这么认为,我现在也是这么认为的.不过,原则上,我们应该可以有这么个底线,好用并且有完美解决问题的方法,就有存在的理由.浮动是我们在写css不可避免的. 一.我们为什么要清除浮动 因为一个元素浮动之后就会脱离文档流,这样使得包含它的父元素并不会因为这个浮动元素的存在而自动撑起高度,此曰”高度塌陷“. 与此同时,一个

详说清除浮动

浮动,从诞生那天起,它就是个特别的属性——既为网页布局带来新的方法,却又随之产生一系列的问题.当然,随着时间的推移,这些问题终究有了一些出色的解决方案,Kayo 要在这里详细介绍的,除了是这些解决方案,还有其中的原理.(温謦提示:文章信息量大且篇幅长,请各位自备瓜子,饮料,音乐). 一.什么是清除浮动? 1.浮动的缺陷 在了解如何清除浮动之前,Kayo 先介绍为什么需要清除浮动.如本文开头所说的,浮动虽然可以便于页面布局,但同时会产生一些问题,也就是我们常说的“副作用”.而一个元素设置了浮动(即

CSS清除浮动常用方法小结 CSS clear both {overflow:auto;zoom:1;}

常用的清除浮动的方法有以下三种: 此为未清除浮动源代码,运行代码无法查看到父级元素浅黄色背景 <!DOCTYPE html><html><head> <meta charset="utf-8"/> <title></title> <style type="text/css"> * { margin: 0; padding: 0; } body { font: 36px bold; c

CSS 清除浮动的4种方法

此为未清除浮动源代码,运行代码无法查看到父级元素浅黄色背景.<style type=”text/css”> <!– *{margin:0;padding:0;} body{font:36px bold; color:#F00; text-align:center;} #layout{background:#FF9;} #left{float:left;width:20%;height:200px;background:#DDD;line-height:200px;} #right{flo

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

此为未清除浮动源代码,运行代码无法查看到父级元素浅黄色背景. <style type="text/css"> <!– *{margin:0;padding:0;} body{font:36px bold; color:#F00; text-align:center;} #layout{background:#FF9;} #left{float:left;width:20%;height:200px;background:#DDD;line-height:200px;}