`
86asm
  • 浏览: 203673 次
  • 性别: 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浮动概念,浮动规则、实际应用及解决方案。详细讲述了通过使用float属性进行左右布局的基本方法,包括浮动的基础、浮动的常见规则以及在各种布局场合的应用示例,并着重解决了由浮动引发...

    CSS2中文参考手册+CSS浮动

    CSS浮动是网页布局中一个重要的概念,主要用于创建多列布局。当一个元素被设置为浮动(float:left或float:right),它将从当前的流中移出,向左或向右移动,直到碰到边框或者另一个浮动元素。这个特性在早期网页设计...

    CSS3绘制不规则图形的一些方法示例

    在CSS3中,绘制不规则图形的方法逐渐变得多样化和实用化。这些技术使得网页设计师能够创造出更为复杂的视觉效果,从而提升用户体验。以下是一些主要的CSS3方法,用于创建不规则图形: 1. **shape-outside属性**:这...

    CSS静止浮动

    标题“CSS静止浮动”指的是在网页设计中,如何使用CSS让元素保持在屏幕的某个位置,即使页面滚动,该元素依然固定不动。这通常被称为“固定定位”(fixed positioning)。在描述中提到的“兼容所有浏览器”,意味着...

    纯CSS3浮动导航条点击的页面转换

    首先,我们来了解CSS3的一些核心特性,这对于创建浮动导航条至关重要: 1. **选择器**:CSS3引入了更强大的选择器,如类选择器、ID选择器、伪类选择器(如`:hover`、`:active`和`:focus`),以及子元素选择器(`&gt;`...

    CSS3小球浮动按钮.zip

    【CSS3小球浮动按钮】是一种创新的网页交互元素,主要利用了CSS3的强大功能来实现独特的视觉效果。这个按钮并非传统的文字或图形形式,而是由7个小球组成的,每个小球都有逼真的滚动和投影效果,提升了用户体验的...

    纯CSS3幽灵上下浮动动画特效.zip

    【标题】"纯CSS3幽灵上下浮动动画特效"是一个基于CSS3技术实现的网页动态效果,它将一个卡通幽灵形象设计成在蓝色背景上上下浮动,为网站增添趣味性和互动性。这个特效主要利用了CSS3的动画属性来创建动态行为,使...

    DIVCSS布局:CSS浮动float属性详解.doc

    这意味着浮动元素会忽略其`display`属性,按照浮动规则进行排列。 `float`属性有三个可能的值: 1. `none`:元素默认不浮动,按正常文档流排列。 2. `left`:元素向左浮动,其他非浮动元素会尽可能地沿着左侧边缘...

    css+js框浮动效果

    虽然上述CSS动画可以实现基本的浮动效果,但有时我们需要更复杂的交互,比如用户触发的浮动或者根据特定条件改变浮动速度。这时,我们可以用JS来操纵CSS的`style`属性或者修改`@keyframes`规则。 例如,我们可以...

    常用的CSS命名规则

    ### 常用的CSS命名规则详解 在前端开发中,合理的CSS命名规则不仅能够提升代码的可读性和可维护性,还能够提高团队协作效率。以下是对标题、描述及部分给定内容中所涉及的CSS命名规则的详细解读。 #### 1. 基础...

    不规则形状排列的css菜单导航

    本文将深入探讨如何使用纯CSS技术创建不规则形状排列的菜单导航,这四种不同的风格可以为您的网站增添独特的视觉效果和用户体验。 1. **圆角矩形与多边形组合**: CSS3中的`border-radius`属性可以让我们轻松实现...

    css规则英汉对照表

    css规则英汉对照表 css规则是css语言的基本组成部分,它们定义了网页的样式和布局。以下是css规则的英汉对照表: 一、字体样式 * font-family:字体 * font-size:字体大小 * font-weight:字体浓淡 * font-style...

    css基础4-浮动布局

    CSS基础-浮动布局 CSS 布局浮动目录是 CSS 中的一种基本布局方式,通过浮动可以实现网页的水平布局和垂直布局。浮动主要用于网页布局,让垂直布局的盒子变成水平布局。 一、结构伪类选择器 结构伪类选择器是一种...

    css 权重,浮动,精灵

    在CSS(层叠样式表)中,权重是一个关键概念,它决定了当多个样式规则应用于同一元素时,哪个规则会胜出并决定元素的最终样式。理解权重对于编写高效的CSS和解决样式冲突至关重要。 首先,我们来详细讲解CSS权重...

    3.3CSS 内容总结(三)浮动.md

    ### CSS 浮动详解 #### 一、传统网页布局方式 在探讨浮动之前,我们首先了解下传统的网页布局方式,主要包括以下三种: 1. **普通流(标准流)**: - **块级元素**:如`div`、`hr`、`p`、`h1`至`h6`、`ul`、`ol`...

    基于jQuery精美浮动层效果(JS+CSS),完整源码,运行可看效果

    通过研究这个"基于jQuery精美浮动层效果(JS+CSS)"的源码,开发者不仅能掌握浮动层的实现技巧,还能加深对jQuery和CSS的理解,提升网页交互设计能力。这是一个很好的学习和实践的资源,对于提升前端开发技能...

    任务创建浮动定位列规则分块的网页html(共9张PPT).ppt

    浮动定位列规则分块是指使用CSS浮动定位和列规则分块技术来实现网页的布局结构。学习者可以通过本课程资源掌握浮动定位列规则分块的技巧,包括定义标签的属性、类选择符及其属性等。 知识点6: 网页布局结构 网页...

    CSS兼容规则 CSS兼容

    ### CSS兼容规则详解 在网页开发过程中,为了确保页面能够在不同的浏览器中正常显示,开发者们经常需要面对的一个问题就是浏览器间的兼容性问题。由于不同浏览器对CSS的支持程度有所差异,因此掌握一定的CSS兼容...

    CSS精品菜单 导航条 css制作 代码

    本资源“CSS精品菜单 导航条 css制作 代码”专注于使用CSS(层叠样式表)来创建优雅且功能强大的导航元素。下面我们将深入探讨CSS在构建导航条和菜单中的应用及其相关知识点。 首先,CSS是网页设计中的样式表语言,...

Global site tag (gtag.js) - Google Analytics