css浮动规则
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浮动规则的更多相关文章
- css 浮动规则
1. 如果浮动元素的高度大于父级元素,那么浮动元素块会超过父级元素的底部.解决办法:将父级元素也设置为浮动定位. 2. 不改变box尺寸的情况下增加box内部的内边距:box-sizing: bord ...
- [[转]CSS浮动原理
CSS Float是网页设计最强大的灵活性功能之一.本文介绍CSS Float的基本原理和行为特征,并介绍各种浏器Float特性的Bugs. 内容 基本的浮动原理 浮动是如何进行的 浮动从何处开始 水 ...
- css浮动布局
上次我们一起对盒子模型进行了一定的了解,今天我们就对css浮动布局做一下研究.首先我们来了解一下网页基本布局的三种形式. 首先我们来了解一下什么是网页布局: 网页的布局方式其实就是指浏览器是如何对网页 ...
- 验分享:CSS浮动(float,clear)通俗讲解
经验分享:CSS浮动(float,clear)通俗讲解 很早以前就接触过CSS,但对于浮动始终非常迷惑,可能是自身理解能力差,也可能是没能遇到一篇通俗的教程. 前些天小菜终于搞懂了浮动的基本原理,迫不 ...
- css浮动现象及清除浮动的方法
css浮动现象及清除浮动的方法 首先先明确浮动最初的定义及使用场景:实现文本环绕图片的效果. 除了用浮动外,目前暂无其他方法实现文本环绕 再来看看浮动的具体定义: 浮动的框可以左右移动,直至它 ...
- 你从来没了解过的CSS浮动
浮动到底是做什么呢?他们是如何影响相关元素的盒模型的呢?浮动的元素与内联元素有什么不同呢?制定浮动元素的位置的具体规则是什么?clear属性是如何工作的,并且它的作用是什么? 即使是经验丰富的开发者也 ...
- CSS浮动、定位
这几天有空,整理了关于CSS浮动和定位的一些知识点,有什么欠缺的地方,欢迎大家批评指正. 一.文档流的概念指什么?有哪种方式可以让元素脱离文档流? 文档流,指的是元素排版布局过程中,元素会自动从左往右 ...
- 常用的css命名规则:
关于团队合作的css命名规范 常用的css命名规则: 头:header 内容:content/container 尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制 ...
- css浮动(folat),清除浮动(clear)(另加两种清除浮动方式,总共三种清除浮动方式)
css浮动(float) float是css样式,用于设置标签的居左浮动和居右浮动,浮动后的元素不属于html文档流,需要用清除浮动把文档拽回到文档流中 浮动值: left:向左浮动 right:向右 ...
随机推荐
- Chai.js断言库API中文文档
基于chai.js官方API文档翻译.仅列出BDD风格的expect/should API.TDD风格的Assert API由于不打算使用,暂时不放,后续可能会更新. BDD expect和shoul ...
- spring cloud深入学习(四)-----eureka源码解析、ribbon解析、声明式调用feign
基本概念 1.Registe 一一服务注册当eureka Client向Eureka Server注册时,Eureka Client提供自身的元数据,比如IP地址.端口.运行状况指标的Uri.主页地址 ...
- 在Deepin Linux折腾python pip
首先通过wget命令下载get-pip.py 地址在https://bootstrap.pypa.io/get-pip.py $ wget https://bootstrap.pypa.io/get- ...
- springMvc实现拦截特定请求判断用户是否登录
流程: 新建一个拦截器,配置拦截哪些,放行哪些 在spring servrt中配置拦截器 <!--配置拦截器--> <mvc:interceptors> <!--登录拦截 ...
- [jnhs]netbeans使用debug模式频繁出现java.lang.OutOfMemoryError: PermGen space内存不足
netbeans赠送的tomcat7 windows解决方法: 修改C:\Program Files\Apache Software Foundation\Apache Tomcat 8.0.27\b ...
- linux目录结构详细说明
Linux各目录及每个目录的详细介绍 [常见目录说明] 目录 /bin 存放二进制可执行文件(ls,cat,mkdir等),常用命令一般都在这里. /etc 存放系统管理和配置文件 /home 存放所 ...
- 微服务开源生态报告 No.7
「微服务开源生态报告」,汇集各个开源项目近期的社区动态,帮助开发者们更高效的了解到各开源项目的最新进展. 社区动态包括,但不限于:版本发布.人员动态.项目动态和规划.培训和活动. 非常欢迎国内其他微服 ...
- java路径中'/'的使用
考虑java的跨系统:uinux和winw7中的‘/'标识方法不同,使用下放语句可避免 File.separator;//代表"/"
- Direct2D 第2篇 绘制椭圆
原文:Direct2D 第2篇 绘制椭圆 #include <windows.h> #include <d2d1.h> #include <d2d1helper.h> ...
- 使用nuxt.js官方脚手架构建koa2的es6编译问题
最近在学用nuxt集成koa2做vue后台,发现官方自带脚手架搭建的koa2使用的仍是es5语法,如果想用es6怎么办呢? 这是由于自带脚手架在构建koa2时默认的nodemon是没有使用babel编 ...