`
deng131
  • 浏览: 672727 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

前端使用CSS浮动16条规则

 
阅读更多
好久没来写东西了,今天补充下css方面。
先要理清的是为什么要清除浮动:
在使用float后父容器(没有设置height情况时)并没有包裹住这两个层,我们只能说,父容器不知道这两个层的高度,从而使得这两个层溢出了父容器,脱离了文档流,这也就是我们为什么要在浮动之后,让父容器识别出内部元素的高度,要清除浮动的原因。
引用

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).如果希望此元素与浮动元素之间有一个明确的间隔,可以在浮动元素上设置下外边距。


参考:
http://www.75team.com/archives/357?utm_source=rss&utm_medium=rss&utm_campaign=%25e5%25a4%25a7%25e8%25af%259dfloat
分享到:
评论

相关推荐

    CSS浮动详解及其解决方案

    内容概要:本文档全面讲解CSS浮动概念,浮动规则、实际应用及解决方案。详细讲述了通过使用float属性进行左右布局的基本方法,包括浮动的基础、浮动的常见规则以及在各种布局场合的应用示例,并着重解决了由浮动引发...

    CSS2中文参考手册+CSS浮动

    CSS2中文参考手册和CSS浮动的深入理解对于任何前端开发者都至关重要。通过学习这些内容,你可以更好地控制网页的样式、布局和交互,提高网页设计的专业性和用户体验。随着技术的发展,虽然现代CSS已经发展到更高级的...

    web前端CSS题库.docx

    ### Web前端CSS题库知识点详解 #### CSS样式表的写法及优先级 - **CSS样式表的三种写法:** - **内联样式表(Inline Style)**:直接在HTML标签中通过`style`属性添加样式。适用于对单个元素进行样式设置的情况。...

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

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

    阿里巴巴前端CSS培训PPT文档【初级入门】

    本篇将根据阿里巴巴前端CSS培训PPT文档【初级入门】的内容,深入讲解CSS的基础知识。 1. CSS简介: CSS是一种样式表语言,用于分离网页内容(HTML或XML)与其表现形式。它的主要作用是控制页面元素的布局,包括...

    前端技术css基础

    3. 浮动布局:使用`float`属性实现元素浮动,常用于创建多列布局。 4. 盒模型布局(Flexbox):使用`display: flex`创建灵活的容器,元素可按需自动排列。 5. 网格布局(Grid):通过`display: grid`创建二维网格...

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

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

    前端开发 css笔记

    - **层叠性**:当多个CSS规则应用于同一个元素时,它们可以相互叠加,除非这些规则之间存在冲突。 - **优先性**:当两个或多个CSS规则发生冲突时,具有更高优先级的规则将会生效。优先级的高低取决于规则的来源和...

    CSS3实现水波浪浮动特效.zip

    例如,我们可以使用`@keyframes`规则来创建一个动画,其中包含了从静止水面到波动状态的一系列变化。 其次,波浪效果可能涉及到`transform`属性,特别是`translateY`和`scale`。通过改变元素的垂直位置和缩放比例,...

    常用的CSS命名规则

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

    头歌教学实践平台 Web前端开发基础 CSS-基础知识

    在Web前端开发中,CSS(层叠样式表)是至关重要的组成部分,它负责网页的布局和样式设计。在这个“头歌教学实践平台”的课程中,我们聚焦于CSS的基础知识,帮助初学者掌握这一核心技术。 首先,我们需要理解CSS的...

    js,css前端规范

    在前端开发领域,JavaScript(简称JS)和CSS是构建网页动态功能和视觉样式不可或缺的两种技术。遵循良好的编码规范能够提高代码的可读性、可维护性和团队协作效率。以下是对"js,css前端规范"的详细说明: **1. ...

    OA-1-网页前端CSS书写规范.zip_css_peopledyh

    本资料"OA-1-网页前端CSS书写规范.zip"包含了对CSS编写规范的详细指南,特别是由peopledyh推荐的实践建议。 首先,让我们了解一些基础的CSS书写规范: 1. **命名约定**:遵循一致的命名规则是关键。可以使用语义化...

    前端CSS及其他知识点错题汇总_前端、面试_

    以下是一些前端CSS面试中常见的问题和知识点汇总: 1. **盒模型**:CSS盒模型包括元素的content(内容)、padding(内边距)、border(边框)和margin(外边距)。理解不同浏览器默认盒模型的差异(W3C标准盒模型与...

    前端css-html5-js三大样式参考手册全套下载

    4. 浮动和清除:浮动元素的布局方式,以及如何防止内容被浮动元素覆盖。 5. 定位:相对定位、绝对定位、固定定位等,用于精确控制元素位置。 6. 媒体查询:实现响应式设计,根据设备屏幕尺寸应用不同的样式。 7. CSS...

    CSS前端框架和例子

    **CSS前端框架与实例解析** 在网页设计与开发中,CSS(Cascading Style Sheets)是用于描述HTML或XML(包括如SVG、MathML等各种XML方言)文档样式的样式表语言。前端框架则是为了简化这一过程,提供了一套预定义的...

    前端css学习入门资源

    在前端开发领域,CSS(Cascading Style Sheets)是用于定义网页中元素样式的重要技术,对于任何想要涉足或提升前端技能的人来说,理解并熟练掌握CSS是必不可少的。本资源包包含了一系列HTML教程,旨在帮助初学者系统...

    CSS参考手册_web前端开发参考手册系列

    《CSS参考手册——Web前端开发参考手册系列》 在Web前端开发中,CSS(Cascading Style Sheets)是用于描述HTML或XML(包括如SVG、MathML等各种XML方言)文档样式的样式表语言。它允许我们将表现与内容分离,使网页...

    前端:css、js、element-ui,用于界面设计

    了解CSS预处理器如Sass或Less也能提高开发效率,它们提供了变量、嵌套规则和混合功能,使代码更易维护和扩展。 JavaScript是一种强大的客户端脚本语言,用于为网页添加动态功能。通过JavaScript,开发者可以处理...

Global site tag (gtag.js) - Google Analytics