css浮动的实例

css浮动的实例的相关文章

• 
  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
• 
  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开发

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

  zjq9_0ra4b18l

  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开发

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

  payar9208

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

  标签：Web开发

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

  ppapp_520

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

  标签：Web开发

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

  迷宫_s

  31
• 
  Flash教程实例：水中浮动的文字

  标签：flash教程

  实例说明：水中浮动的文字就是似文字放在水中，字随着水波的波动而波动，主要利用了遮罩效果及文字透明度的变化。别空想象，开始操作吧! 创作步骤： 第1步，启动 MX，新建一个文件，在舞台的空白处单击右键选择“文档属性”弹出其对话框，设舞台的大小为400PX×200PX，颜色为黑色，如图1所示。 第2步，我们现在要制作一个过滤条，有了它才能做出文字的浮动效果，按...[ 查看全文 ]

  张桂捃

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

  标签：Web开发

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

  Apologlze8

  11
• 
  CSS布局实例

  标签：Web开发

  Source Code to Run html head style type="text/css" !-- body {  margin: 0;  padding: 0;  font-size:12px; } #layout{  background-color: #FFFFFF;  border: 0;  width: 400px;  margin: 0 auto; } .list{  margin: 0px 10px 20px;  text-align: left; } .list ul{  list-style-type: none;  margin: 0px;  padding: 0px; } .list li...[ 查看全文 ]

  atjqz8

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

  标签：Web开发

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

  长液漫漫

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

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

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

  心想事成01051

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

  蒙娜丽莎AiNi

  161
• 
  CSS技巧：我们一起认识CSS闭合浮动元素

  标签：Web开发

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

  gengliting3

  41
• 
  Div+CSS教程：如何闭合浮动元素？

  标签：Web开发

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

  念思的那个她

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

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

  绝对定位或浮动都能够用来实现分栏效果。二者可以独立使用，也可以结合在一起，相辅相成。 进入论坛参与讨论 但是，我们常用的布局并没有这么简单，除了三栏之外，我们还需要一个页头和一个页脚，如下图： 这时候，再用绝对定位布局就行不通了，因为绝对定位的元素会从文档流中完全移除，这时，页脚会紧挨着页头，显示在页头的下方。 如果我们一定要采用绝对定位的话，那么必须预先知道这三栏中每一栏...[ 查看全文 ]

  想念你的XX

  211
• 
  CSS技巧：子元素浮动后父容器的闭合

  标签：Web开发

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

  爱芝哟

  31