清除浮动的几种方式

参考资料

方式1

.clearfix {
  overflow: auto;//获取 layout
  zoom: 1;//ie 6
}

方式2

.clearfix:after {
    content:" ";
    display:table;
    clear:both;
}

时间： 2024-09-20 17:44:54

清除浮动的几种方式的相关文章

html清除浮动的6种方法示例

本文讲了6种清除HTML元素浮动的方法供大家参考使用,具体下看下文使用display:inline-block会出现的情况: 1.使块元素在一行显示 2.使内嵌支持宽高 3.换行被解析了 4.不设置的时候宽度由内容撑开 5.在IE6,7下步支持块标签由于inline-block属性换行的时候被解析(有间隙)故解决方法使用浮动float:left/right 使用浮动时出现的情况: 1.使块元素在一行显示 2.使内嵌元素支持宽高 3.不设置不宽高的时候宽度由内容撑开 4.换行

html清除浮动的6种方法示例_CSS/HTML

使用display:inline-block会出现的情况: 1.使块元素在一行显示2.使内嵌支持宽高3.换行被解析了4.不设置的时候宽度由内容撑开5.在IE6,7下步支持块标签由于inline-block属性换行的时候被解析(有间隙)故解决方法使用浮动float:left/right 使用浮动时出现的情况: 1.使块元素在一行显示2.使内嵌元素支持宽高3.不设置不宽高的时候宽度由内容撑开4.换行不被解析(故使用行内元素的时候清除间隙的方法可以使用浮动)5.元素添加浮动,会脱离文档流,按照指定的

清除浮动clearfix

一直有在用,但是没有分析几种清楚浮动的方法和他们之间的比较. 为什么要清除浮动? 盒子里用了CSS float属性,父级对象不能被撑开. 这是6个float:left的<li>,父级<ul>添加上了边框,明显没有撑开. 这样的副作用是什么? 背景效果出不来边框出不来 margin\paddding不正确清除浮动的四种方法比较使用高度说明:在父元素上加个高度缺点:内容的高度必须确定而且计算好,如果以后要改变或者做自适应,就很麻烦. 推荐指数: clear:both; 说明:

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;} #right{float

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;}

彻底理解浮动float CSS浮动详解清除浮动的方法

原文:彻底理解浮动float CSS浮动详解清除浮动的方法我们把网页的常用的布局格式分为以下三种: 1.标准流. 所谓的标准流就是,行内元素自己单独一行,而块级元素是上下显示的. 以前我们学习的都是标准流. 注意:标准流使我们网页布局中最稳定的一种结构 2. 浮动流使我们学习的脱离标准流的第一种方式.会影响我们标准流的排列.所以,我们布局的时候,能用标准流做的,就不用浮动做. 3. 定位流定位流也是脱离标准流的一种模式.它完全脱离标准流,不会对标

CSS3与页面布局学习总结（三）——BFC、定位、浮动、7种垂直居中方法

一.BFC与IFC 1.1.BFC与IFC概要 BFC(Block Formatting Context)即"块级格式化上下文", IFC(Inline Formatting Context)即行内格式化上下文.常规流(也称标准流.普通流)是一个文档在被显示时最常见的布局形态.一个框在常规流中必须属于一个格式化上下文,你可以把BFC想象成一个大箱子,箱子外边的元素将不与箱子内的元素产生作用. BFC是W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他

网页制作技巧：br玩转清除浮动

浮动|技巧|网页先看一下br怎么玩转"清除浮动"了.使用以下代码 <br clear="all" /> 以下是代码效果演示: 运行代码框 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xml

CSS技巧：关于CSS Hack与float闭合（清除浮动）

核心提示:CSS技巧:关于CSS Hack与float闭合一.CSS HACK 以下两种方法几乎能解决现今所有HACK. 1, !important 随着IE7对!important的支持, !important 方法现在只针对IE6的HACK.(注意写法.记得该声明位置需要提前.) 2, IE6/IE77对FireFox *+html 与 *html 是IE特有的标签, firefox 暂不支持.而*+html 又为 IE7特有标签. <style>#wrapper{#wrapper {