清除网页浮动CSS的做法

清除网页浮动CSS的做法的相关文章

• 
  CSS:清除浮动的最优方法

  标签：Web开发

  在CSS森林群里讨论一个margin的问题中无意间发现overflow也可以用来清除浮动，嘿嘿，这个方法不单使用简单，而且FF、OP、IE7都支持，从此可以告别那又长兼容性又差的FF清浮动的方法了。 方法真的很简单，只要为需要清浮动的标签加上overflow这个属性。 CSS代码 ul{ list-style:none; height:auto; margin:0;p adding:0; background-color:#436973; } li{ float:left; width:80px; height:80px; backgro...[ 查看全文 ]

  王旭的忏悔

  31
• 
  更简洁的CSS清除浮动方法

  标签：Web开发

  清理浮动有很多种方式，像使用 br 标签自带的 clear 属，使用元素的 overflow，使用空标签来设置 clear:both 等等。但考虑到兼容问题和语义化的问题，一般我们都会使用如下代码来清理浮动。 /* 清理浮动 */ .clearfix:after {  visibility:hidden;  display:block;  font-size:0;  content:" ";  clear:both;  height:0; } .clearfix {  zoom:1; } 其原理是...[ 查看全文 ]

  阿斯达等等77

  41
• 
  CSS清除浮动的三个方法

  标签：Web开发

  用空标签清除 .clr {clear: both;} Left Right 使用 overflow 属性 #layout {overflow:auto; zoom:1;} Left Right 使用 :after （非 IE 浏览器） #layout:after{ display: block; clear: both; content: ''; visibility:hidden; height: 0; } Left Right 注：使用 :after 需要注意几点，设置高度为零（height: 0;）；content 是必须的，但其值可以为空。 [ 查看全文 ]

  超级猫耳开关

  21
• 
  css浮动的实例

  标签：Web开发

  css浮动 结论，非浮动元素可以为后面的浮动元素定位， 但是 浮动元素无法再为其后的非浮动元素定位。 No-float A + Float B + No-float C c和b 会按照A的边界进行定位， !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd" HTMLHEADTITLECSS TEST/TITLE style type=text/css body{ text-align: center; background: #000...[ 查看全文 ]

  笑笑是我的娃娃

  41
• 
  网页CSS技巧：闭合浮动元素超级简单的方法

  标签：Web开发

  关于闭合浮动元素（clearing float）的方法现在已经很多了，你还不了解的话去old9的blog看看，有一篇闭合浮动元素。 这些方法我最喜欢就是 使用:after 伪类动态的嵌入一个用于清除浮动的元素，可惜代码量太大了，看着不够简洁。现在我看到有个方法超级简单。赶紧介绍一下。 原理是这样的，外围元素之所以不能很好的延伸，问题出在了overflow上，因为overflow不可见。见W3C的解释： In addition, if the ele...[ 查看全文 ]

  冷温柔狗

  21
• 
  CSS实现网页分栏布局的方法：绝对定位和浮动

  标签：Web开发

  在CSS中，实现分栏布局有两种方法。第一种方法是使用四种CSS定位选项（absolute 、static、relative和fixed）中的绝对定位（absolute positioning），它可以将文档中的某个元素从其原本位置上移除，并重新定位在期望的任何地点之上。第二种则是使用CSS中的浮动（float）概念。 绝对定位或浮动都能够用来实现分栏效果。二者可以独立使用，也可以结合在一起，相辅相成。 1、绝对定位 绝对定位的优势在...[ 查看全文 ]

  漂亮妮妮1

  2331
• 
  “clear:both;”清除浮动的应用

  标签：Web开发

  在CSS中我们会经常要用到“清除浮动”Clear，比较典型的就是clear:both; CSS手册上是这样说明的：该属性的值指出了不允许有浮动对象的边。这个属性是用来控制float属性在文档流的物理位置的。 当属性设置float（浮动）时，其所在的物理位置已经脱离文档流了，但是大多时候我们希望文档流能识别float（浮动），或者是希望float（浮动）后面的元素不被float（浮动）所影响，这个时候我们就需要用clear:both;...[ 查看全文 ]

  探索963

  01
• 
  CSS浮动布局基础

  标签：Web开发

  基于浮动的布局利用了float（浮动）属性来并排定位元素，并在网页上创建列。可以利用这个属性来创建一个环绕在周围的效果，例如环绕在照片周围，但是当你把它应用到一个div标签上时，浮动就变成了一个强大的网页布局工具。float属性把一个网页元素移动到网页（或者其他包含块）的一边。任何显示在浮动元素下方的HTML都在网页中上移，并环绕在浮动周围。 float属性接受3种不同值之一：left（左）、right...[ 查看全文 ]

  小辉8388

  51
• 
  CSS布局之浮动（二）

  标签：Web开发

  在上一个文章里写了关于左（右）侧定宽右（左）侧自动缩放的两列浮动，这个文章就要说一下三列浮动的问题了。在之前说过，两列浮动是其他多列浮动的基础，明白了两列浮动的原理后，三列或三列以上的多列浮动也变得简单。 左侧中间定宽，右侧自适应： 因边左侧跟中间都是定宽的，只有右侧是自适应宽度的，所以这个三列浮动是和两列浮动中的左侧定宽右侧自适应一样的道理，HTML结构代码如下： !...[ 查看全文 ]

  封一川

  21
• 
  理解CSS的浮动标签Float

  标签：Web开发

  Float（浮动）概念也许是CSS中最让人迷惑的一个概念吧。Float经常被错误理解，而且因为将上下文元素全部浮动导致的可读性、可用性问题备受责难。然而，这些问题的根源并不在于理论本身，而是开发人员以及浏览器对理论的解读造成的。 如果你认真的去读一下浮动概念，你会发现并不像所见的那样复杂。大多数问题都是由于老版本的IE带来的（我只是猜想）。如果你知道这些bug，你就能避免这些问题。 让我们尝...[ 查看全文 ]

  BJBJabcd

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

  标签：Web开发

  在CSS中我们会经常要用到清除浮动Clear，比较典型的就是 clear:both; CSS手册上是这样说明的：该属性的值指出了不允许有浮动对象的边。这个属性是用来控制float属性在文档流的物理位置的。 当属性设置float（浮动）时，其所在的物理位置已经脱离文档流了，但是大多时候我们希望文档流能识别float（浮动），或者是希望float（浮动）后面的元素不被float（浮动）所影响，这个时候我们就需要用clear:both;...[ 查看全文 ]

  轨迹887

  31
• 
  CSS布局之浮动（一）

  标签：Web开发

  CSS浮动一直是个比较让人郁闷的问题，很多的布局问题都出在浮动上，特别是当浮动的列数很多时，但其实只要理解了两列结构的浮动，面对多列数的浮动也不会再心慌，因为两列结构的左右浮动是最基本的浮动，也是更多浮动的基础，三列、四列等的浮动都是出于此的。 来看一下几种常见的CSS两列浮动，CSS代码见以下各分类，HTML结构代码如下： !DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitiona...[ 查看全文 ]

  zjq9_0ra4b18l

  31
• 
  揭开迷惑 理解CSS的浮动Float

  标签：Web开发

  Float（浮动）概念也许是CSS中最让人迷惑的一个概念吧。Float经常被错误理解，而且因为将上下文元素全部浮动导致的可读性、可用性问题备受责难。然而，这些问题的根源并不在于理论本身，而是开发人员以及浏览器对理论的解读造成的。 如果你认真的去读一下浮动概念，你会发现并不像所见的那样复杂。大多数问题都是由于老版本的IE带来的（我只是猜想）。如果你知道这些bug，你就能避免这些问题。 ...[ 查看全文 ]

  home儿子的笑容

  81
• 
  CSS教程:弄懂闭合浮动元素

  标签：Web开发

  按照CSS规范，浮动元素（floats）会被移出文档流，不会影响到块状盒子的布局而只会影响内联盒子（通常是文本）的排列。因此当其高度超出包含容器时，一般父容器不会自动伸长以闭合浮动元素。但是有时我们却需要这种自动闭合行为，具体如何处理呢？ 有一种做法 就是在父容器内再插入一个额外的标签，并令其清除浮动（clear）以撑大父容器。这种方法浏览器兼容性好，没有什么问题，缺点就是需要额...[ 查看全文 ]

  payar9208

  31
• 
  CSS教程：弄懂闭合浮动元素

  标签：Web开发

  按照CSS规范，浮动元素（floats）会被移出文档流，不会影响到块状盒子的布局而只会影响内联盒子（通常是文本）的排列。因此当其高度超出包含容器时，一般父容器不会自动伸长以闭合浮动元素。但是有时我们却需要这种自动闭合行为，具体如何处理呢？ 有一种做法就是在父容器内再插入一个额外的标签，并令其清除浮动（clear）以撑大父容器。这种方法浏览器兼容性好，没有什么问题，缺点就是需要额外的...[ 查看全文 ]

  ppapp_520

  41
• 
  CSS规范 闭合浮动元素介绍

  标签：Web开发

  按照CSS规范，浮动元素（floats）会被移出文档流，不会影响到块状盒子的布局而只会影响内联盒子（通常是文本）的排列。因此当其高度超出包含容器时，一般父容器不会自动伸长以闭合浮动元素。但是有时我们却需要这种自动闭合行为，具体如何处理呢？ 有一种做法就是在父容器内再插入一个额外的标签，并令其清除浮动（clear）以撑大父容器。这种方法浏览器兼容性好，没有什么问题，缺点就是需要额外的（而且通...[ 查看全文 ]

  迷宫_s

  31
• 
  CSS教程:闭合CSS浮动元素的几种方法

  标签：Web开发

  按照CSS规范，浮动元素（floats）会被移出文档流，不会影响到块状盒子的布局而只会影响内联盒子（通常是文本）的排列。因此当其高度超出包含容器时，一般父容器不会自动伸长以闭合浮动元素。但是有时我们却需要这种自动闭合行为，具体如何处理呢？ 有一种做法就是在父容器内再插入一个额外的标签，并令其清除浮动（clear）以撑大父容器。这种方法浏览器兼容性好，没有什么问题，缺点就是需要额外...[ 查看全文 ]

  Apologlze8

  11
• 
  CSS：闭合元素和浮动元素的差别

  标签：Web开发

  提示：本文不是教程，而是对闭合浮动元素的方法在某个特定情况下的现象的讨论，涉及float、clear、overflow、:after等知识，新手勿入。 float属性在页面排版上非常有用，但是也带来很多问题。最常见的就是浮动元素的闭合问题。 如果一个没有设定高度的不浮动元素的子元素浮动，则该元素的高度不会包括浮动子元素的高度，而只会包含其内部不浮动元素的高度，因为浮动元素不属于常规流向，它脱离了文档流...[ 查看全文 ]

  长液漫漫

  71
• 
  CSS浮动引起文本重影的怪异问题

  标签：平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计

  事物绝非十全十美总有强差人意的一面，之前针对浮动分析了其引起文本重影的怪异问题，而作为浮动布局的最佳搭档定位布局也存在一定的缺陷。 围绕着定位列出的种种问题，对某些情况只是作出了分析而暂时没有找到有解决方案，但既然知道问题所在，我们可以尽可能的采取其它措施避免这现象。 position:relative;属性值导致overflow:hidden;失效。 问题：在IE6/7中子级设置position:relative;属性值后，导致...[ 查看全文 ]

  心想事成01051

  21
• 
  CSS教程：彻底弄懂闭合浮动元素

  标签：Web开发

  最近两个月断断续续做了好几个网站的美工，做的过程中对DIV+Css的标准开发有了进一步的了解。有两点收获最大，一是彻底弄懂了CSS的盒子模式(Box Model)，再一个就是搞定了困扰我很久的闭合浮动元素的问题： 一般说来如果某个子元素使用了浮动(float)，那父元素总是不能确切地知道子元素是在什么位置结束的，所以父元素的下边框总是从子元素的中间甚至是顶部穿过，看起来很不舒服。 最早时我...[ 查看全文 ]

  颓档诰都02

  21