CSS 布局Float 【3】

浮动元素会生成一个块级框,而不论它本身是何种元素。
如果浮动非替换元素,则要指定一个明确的宽度;否则,它们会尽可能地窄。
注释:假如在一行之上只有极少的空间可供浮动元素,那么这个元素会跳至下一行,这个过程会持续到某一行拥有足够的空间为止。
请看下图,当把框 1 向右浮动时,它脱离文档流并且向右移动,直到它的右边缘碰到包含框的右边缘:

再请看下图,当框 1 向左浮动时,它脱离文档流并且向左移动,直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中,所以它不占据空间,实际上覆盖住了框 2,使框 2 从视图中消失。
如果把所有三个框都向左移动,那么框 1 向左浮动直到碰到包含框,另外两个框向左浮动直到碰到前一个浮动框。

如下图所示,如果包含框太窄,无法容纳水平排列的三个浮动元素,那么其它浮动块向下移动,直到有足够的空间。如果浮动元素的高度不同,那么当它们向下移动时可能被其它浮动元素“卡住”:

clear 属性规定元素的哪一侧不允许其他浮动元素。

CSS 布局Float 【3】的更多相关文章
- CSS 布局Float 【0】
float是 css 样式的定位属性.我们在印刷排版中,文本可以按照需要围绕图片.一般把这种方式称为“文本环绕”.在网页设计中,应用了CSS的float属性的页面元素就像在印刷布局里面的被文字包围的图 ...
- CSS 布局Float 【4】
一些浮动模型的基本知识:浮动模型也是一种可视化格式模型,浮动的框可以左右移动(根据float属性值而定),直到它的外边缘碰到包含框 或者另一个浮动元素的框的边缘.浮动元素不在文档的普通流中,文档的普通 ...
- CSS 布局Float 【2】
1.页面标准文档流.浮动层.float属性 1.1 文档流 HTML页面的标准文档流(默认布局)是:从上到下,从左到右,遇块(块级元素)换行. 1.2 浮动层 浮动层:给元素的float属性赋值后,就 ...
- 前端学习笔记--CSS布局--float定位
1.float属性 box1向右移动,box2顶替了box1的位置,box3顶替了box2的位置. 2.clear属性 案例: 一列三行布局: <!DOCTYPE html> <ht ...
- CSS 布局Float 【1】
1.HTML元素分类 HTML元素大题可分为内联(inline)元素和块(block)元素. 1.1 内联元素(inline) ①元素显示方式:"文本方式",1个挨着1个,不独自占 ...
- CSS布局:Float布局过程与老生常谈的三栏布局
原文见博客主站,欢迎大家去评论. 使用CSS布局网页,那是前端的基本功了,什么两栏布局,三栏布局,那也是前端面试的基本题了.一般来说,可以使用CSSposition属性进行布局,或者使用CSSfloa ...
- 转:CSS布局:Float布局过程与老生常谈的三栏布局
使用CSS布局网页,那是前端的基本功了,什么两栏布局,三栏布局,那也是前端面试的基本题了.一般来说,可以使用CSSposition属性进行布局,或者使用CSSfloat属性布局.前者适合布局首页,因为 ...
- CSS布局 ——从display,position, float属性谈起(转)
CSS布局 ——从display,position, float属性谈起 页面布局,或者是在页面上做些小效果的时候经常会用到 display,position和float 属性,如果对它们不是很了 ...
- [浅谈CSS核心概念] CSS布局模型:float和position
1.流动模型 HTML元素在默认情况下都是按照"流动模型"进行布局的,网上也有人称之为"普通流"."文档流"之类的.这种布局模式的特点在于: ...
随机推荐
- codeforces B. Prison Transfer
题意:输入n,t,c,再输入n个数,然后问有多少个连续区间内的最大值小于等于t; #include <cstdio> #include <cstring> #include & ...
- javascript(js)中的substring和substr方法
1. substring 方法 定义和用法: substring 方法用于提取字符串中介于两个指定下标之间的字符. 语法: stringObject.substring(start,end) 参数 ...
- Oracle预估的基数算法
SQL> create table t as select * from dba_objects; Table created. SQL> create index idx_t on t( ...
- WordPress BuddyPress Extended Friendship Request插件跨站脚本漏洞
漏洞名称: WordPress BuddyPress Extended Friendship Request插件跨站脚本漏洞 CNNVD编号: CNNVD-201307-609 发布时间: 2013- ...
- POJ-3189-Steady Cow Assignment(最大流+枚举)
题意 此题题意不太好懂.现有n头牛和b个牛棚,每个牛棚可以养的牛的数目都有一个限制c[i],表示该牛棚最多只能关c[i]头牛,每头牛对每一个牛棚都有一个喜爱值,用1到b来表示,现在要安排这些牛,使得牛 ...
- Light OJ 1017 - Brush (III)
题目大意: 在一个二维平面上有N个点,散落在这个平面上.现在要清理这些点.有一个刷子刷子的宽度是w. 刷子上连着一根绳子,刷子可以水平的移动(在X轴方向上).他可以把刷子放在任何一个地方然后开 ...
- 后缀自动机(SAM) :SPOJ LCS - Longest Common Substring
LCS - Longest Common Substring no tags A string is finite sequence of characters over a non-empty f ...
- 汇编学习笔记(3)[bx]和loop
本文是<汇编语言>一书的学习笔记,对应书中的4-6章. 汇编程序的执行 要想将源代码变为可执行的程序需经过编译.连接两个步骤,WIN7操作系统下需要MASM程序来进行编译连接工作.将MAS ...
- vim 的升级 安装 重装
转载自http://blog.chinaunix.net/uid-22891521-id-2109310.html 由于一直以来在一个很old的linux版本下搞开发,里面的vim固然也是一个很old ...
- Java nextInt()函数
nextInt( int num) 能接受一个整数作为它所产生的随机整数的上限,下限为零,比如:nextInt(4)将产生0,1,2,3这4个数字中的任何一个数字,注意这里不是0-4,而是0-3..但 ...