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).如果希望此元素

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

*******************************************************************************************************************************************************************************

替换元素:

替换元素是浏览器根据其标签的元素与属性来判断显示具体的内容。

比如:<input /> type="text" 的是,这是一个文本输入框,换一个其他的时候,浏览器显示就不一样

(X)HTML中的<img>、<input>、<textarea>、<select>、<object>都是替换元素,这些元素都没有实际的内容。

非替换元素:

(X)HTML 的大多数元素是不可替换元素,他们将内容直接告诉浏览器,将其显示出来。

比如<p>wanmei.com</p>

浏览器将把这段内容直接显示出来。

除了这两字,还有两种非常属性的元素,显示元素,他分为两种情况,一种是‘块及元素’ ‘block’,还有一种是“行内元素”inline,大家也叫“内联元素”。

原文地址:http://blog.csdn.net/luguo0816/article/details/7265677

css浮动规则的更多相关文章

  1. css 浮动规则

    1. 如果浮动元素的高度大于父级元素,那么浮动元素块会超过父级元素的底部.解决办法:将父级元素也设置为浮动定位. 2. 不改变box尺寸的情况下增加box内部的内边距:box-sizing: bord ...

  2. [[转]CSS浮动原理

    CSS Float是网页设计最强大的灵活性功能之一.本文介绍CSS Float的基本原理和行为特征,并介绍各种浏器Float特性的Bugs. 内容 基本的浮动原理 浮动是如何进行的 浮动从何处开始 水 ...

  3. css浮动布局

    上次我们一起对盒子模型进行了一定的了解,今天我们就对css浮动布局做一下研究.首先我们来了解一下网页基本布局的三种形式. 首先我们来了解一下什么是网页布局: 网页的布局方式其实就是指浏览器是如何对网页 ...

  4. 验分享:CSS浮动(float,clear)通俗讲解

    经验分享:CSS浮动(float,clear)通俗讲解 很早以前就接触过CSS,但对于浮动始终非常迷惑,可能是自身理解能力差,也可能是没能遇到一篇通俗的教程. 前些天小菜终于搞懂了浮动的基本原理,迫不 ...

  5. css浮动现象及清除浮动的方法

    css浮动现象及清除浮动的方法   首先先明确浮动最初的定义及使用场景:实现文本环绕图片的效果. 除了用浮动外,目前暂无其他方法实现文本环绕   再来看看浮动的具体定义: 浮动的框可以左右移动,直至它 ...

  6. 你从来没了解过的CSS浮动

    浮动到底是做什么呢?他们是如何影响相关元素的盒模型的呢?浮动的元素与内联元素有什么不同呢?制定浮动元素的位置的具体规则是什么?clear属性是如何工作的,并且它的作用是什么? 即使是经验丰富的开发者也 ...

  7. CSS浮动、定位

    这几天有空,整理了关于CSS浮动和定位的一些知识点,有什么欠缺的地方,欢迎大家批评指正. 一.文档流的概念指什么?有哪种方式可以让元素脱离文档流? 文档流,指的是元素排版布局过程中,元素会自动从左往右 ...

  8. 常用的css命名规则:

    关于团队合作的css命名规范 常用的css命名规则: 头:header 内容:content/container 尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制 ...

  9. css浮动(folat),清除浮动(clear)(另加两种清除浮动方式,总共三种清除浮动方式)

    css浮动(float) float是css样式,用于设置标签的居左浮动和居右浮动,浮动后的元素不属于html文档流,需要用清除浮动把文档拽回到文档流中 浮动值: left:向左浮动 right:向右 ...

随机推荐

  1. jquery源码学习(四)—— jquery.extend()

    a.jQuery.extend( source ) b.jQuery.extend(destination, source1, source2, source3 ....) c.jQuery.exte ...

  2. Spring事务传播行为详解

    前言 Spring在TransactionDefinition接口中规定了7种类型的事务传播行为.事务传播行为是Spring框架独有的事务增强特性,他不属于的事务实际提供方数据库行为.这是Spring ...

  3. 【模板】ST表 洛谷P1816 忠诚

    P1816 忠诚 题目描述 老管家是一个聪明能干的人.他为财主工作了整整10年,财主为了让自已账目更加清楚.要求管家每天记k次账,由于 管家聪明能干,因而管家总是让财主十分满意.但是由于一些人的挑拨, ...

  4. bzoj2212/3702 [Poi2011]Tree Rotations 线段树合并

    Description Byteasar the gardener is growing a rare tree called Rotatus Informatikus. It has some in ...

  5. LUOGU P2921 [USACO08DEC]在农场万圣节Trick or Treat on the Farm

    传送门 解题思路 记忆化搜索,如果搜到环,就将环的大小处理出来. 代码 #include<iostream> #include<cstdio> #include<cstr ...

  6. Win7系统中wmiprvse.exe占用CPU高如何解决

    该进程的详细路径是在:C:\WINDOWS\System32\Wbem  我们可以在任务管理器中“wmiprvse.exe”进程上单击右键,选择“打开文件位置”即可看到,如果该文件不在该文件夹中,那么 ...

  7. CEF 框架使用集锦

    CEF 框架使用集锦: 参考:〓https://github.com/NetDimension/NanUI/wiki/%E5%BC%80%E5%A7%8B%E4%BD%BF%E7%94%A8NanUI ...

  8. [Vue CLI 3] 插件开发之 registerCommand 到底做了什么

    首先,我们看到在 package.json 中有 scripts 的定义: "scripts": { "serve": "vue-cli-servic ...

  9. pygame-常用的方法

    1.pygame常用的方法 2.语音 图片

  10. JS判断PC 手机端显示不同的内容

    方法一: function goPAGE() { if ((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android ...