`
86asm
  • 浏览: 199795 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类
最新评论

CSS 浮动的16条规则

阅读更多


1.浮动元素会从文档正常流中删除,但它仍会影响布局
2.浮动非替换元素必须为其指定width,否则元素的width会趋于0而导致浮动元素不能完整显示
3.一旦元素具有了浮动属性,它便成为了一个块级元素。
4.浮动元素的左右外边界不能超出包含块的左右内边界
5.浮动元素永不会重叠


6.浮动元素不会超过容器的上padding
7.后浮动的元素永不会超过先浮动元素的顶端
8.浮动元素会尽可能高地放置,便这个高受限于规则6和规则7
9.浮动元素的下边界没有要求,因此当容器不足以容下浮动元素时,浮动元素会向下延伸。但部分浏览器会采取增大容器高度以容下浮动元素

,而对于符合CSS2.1规范的浏览器要想让容器容下浮动元素的一个可行方法是:让容器也浮动
10.浮动元素向下延伸时,不会影响正常文本的显示,文本会相对于浮动元素进行偏移。但部分文本背景会被浮动元素遮住

11.如果浮动元素设置了负的外边距、这将破坏规则4、6、7
12.当浮动元素的width>容器的width时,这会使得浮动元素超出容器的左右边界(超左超右依浮动方向而定)
13.浮动重叠规则:行内框(如strong)与浮动元素重叠时,其边框、背景、内容均位于浮动元素之上;块框与浮动元素重叠时,其边框、背景在

浮动元素之下,而内容在浮动元素之上。
14.对某个元素应用clear:left,意味着这个元素的左边不能有浮动元素。
15.clear不能用于非块级元素,比如<br/>,在大多数浏览器看来它是一个非块级元素,因此如果对br应用clear来清除浮动不会有任何效果,

除非改变br的display:block。
16.如果某元素应用clear清除浮动,则此元素设置的上外边距值会被忽略,但会有一个重新计算的上外边距值(甚至可能为0).如果希望此元素

与浮动元素之间有一个明确的间隔,可以在浮动元素上设置下外边距。

分享到:
评论

相关推荐

    CSS文集

    利用CSS的Expression自定义属性来实现表格的OnMouseOver 特效 需要掌握的八个CSS布局技巧 用css实现链接经过时显示浮动图片背景的效果...Firefox和IE6兼容的垂直居中 CSS CSS浮动原理 CSS网站元素设计...

    css定位绝对相对定位

    css的绝对定位,相对定位,浮动的规则。等等等

    《CSS全程指南》随书光盘

    11.2.3 创建CSS规则 250 11.3 CSS调试辅助工具 256 11.3.1 Web Developer插件的安装 256 11.3.2 Web Developer插件概要 258 11.3.3 Web Developer的主要功能 261 11.3.4 Web Accessibility Toolbar的安装 269 11.3.5...

    CSS网站布局实录 (第二版)PDF版

    文本、图像、超链接、列表、菜单、网站导航、表单、数据表格、浮动布局等CSS布局控制。),智能、创造型布局思维(智慧、完美视觉艺术效果之CSS布局技巧、CSS Hack实践战略),Web技术团队倾情奉献(来自CSS布局与Web标准...

    基于文档流解读html元素的(css)定位形式

    每个非浮动块级元素都独有一行, 浮动元素则按规则浮在行的一端. 若当时行容不下, 则另起新行再浮动。  内联元素也不会独有一行. 简直一切元素(包括块级,内联和列表元素)均可生成子行, 用于摆放子元素。  有三种...

    JQuery&CSS;&CSS;+DIV实例大全.rar

    推荐jQuery+CSS实现图片放大浮动层带关闭按钮 15.通用jQuery对话框dialog或popup弹出层或提示窗口插件下载 6)工具提示 1.jquery+div随屏幕滚动特效(支持设置参数滚动) 2.jQuery字符插件之适合留言板的jquery...

    html/css中float浮动的用法实例详解

    二、浮动定位的基本规则 1、当元素的float属性取值为left或right时,元素属于浮动定位; 2、若剩余空间无法放下浮动的盒子,则该盒子向下移动,直到具备足够的空间能容纳盒子,然后再向左或向右移动; 3、浮动盒子的...

    CSS 清除浮动与BFC的方法

    BFC的布局规则 内部的Box会在垂直方向,一个接一个地放置。 Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。 计算BFC的高度时,浮动元素也参与计算。 BFC的区域不会与float ...

    css入门笔记

    1.css的概述 1.问题 HTML属性修饰有一定局限,是不太便捷 2.css的语法规范 1.使用css样式方式 1.内联样式 行内样式 特点:将css样式定义在HTML标记中 语法: 样式声明:用样式属性和值组成(属性:值;) ...

    HTML/CSS中的float定位在iOS上的实现

    不过在CSS中,任何元素都可以浮动,假如在一行之上只有极少的空间可供浮动元素,那么这个元素会跳至下一行,这个过程会持续到某一行拥有足够的空间为止。浮动布局主要用于那些图文环绕以及实现一些界面不规则排列的...

    css(display,float,position)深入理解

    display 用来设置元素的显示方式 display : block | none | inline | inline-...就是要打破文档流的默认显示规则。如果要让元素按照我们的布局要求进行显示。这时就要利用float属性 1.任何申明为 float 的元素自动被设

    getting-started-with-css:CSS入门

    CSS入门-练习查看演示:... 课程01-将样式表应用于页面课程02-编写CSS规则第03课-基本CSS选择器课04-CSS继承课05-CSS级联第06课-块和内联元素课07-CSS定位第08课-CSS浮动第09课-CSS背景第10课-打印CSS 请参阅以供使用。

    HTML5与CSS3基础教程(第8版)高清文字

    目录 第1章 网页的构造块 1 ... ... 1.3 标签:元素、属性、值及其他 4 1.4 网页的文本内容 7 ...1.5 链接、图像和其他非文本内容 8 ...1.9 浏览器对网页的默认显示效果 16 ...附录B CSS引用 408

    CSS使用BFC规则布局引发外层div包裹内层div的处理方法

    BFC情况下人们通常在div中使用float和margin,这会经常出现一些问题,这里就来看一下CSS使用BFC规则布局引发外层div包裹内层div的处理方法,需要的朋友可以参考下.

    网页设计实验HTML的标签使用

    2、给新建的标签建立CSS规则,设置它们的背景颜色,高度宽度以及边界,若都设为左浮动,那么两个标签都会靠左边,如果占不满空间的话。如果一个设置为左浮动,另一个设置为右浮动,那么会出现一个左边一个右边的效果...

Global site tag (gtag.js) - Google Analytics