CSS学习笔记---float的深入剖析
来源:互联网 发布:网络市场调研的概念 编辑:程序博客网 时间:2024/05/16 03:14
float是什么?
float即为浮动,在html中的作用是使元素脱离正常的文档流并使其移动到其父元素的“最左边”或“最右边”。下面解释下这个定义中的几个名词的概念:
- 文档流:在html中文档流即为元素从上至下排列的顺序。
- 脱离文档流:元素从正常的排列顺序被抽离。
- 最左边/最右边:上述的移动到父元素最左和最右是指元素往左或往右移动直到碰到另一个浮动元素或父元素内容区的边界(不包括padding)。
float造成的影响
对其父元素的影响
对于其父元素来说,元素浮动之后,它脱离正常文档流,所以它也无法撑开其父元素,造成父元素的塌陷,效果如下图所示。
1 //CSS 2 #wrapper { 3 padding: 20px; 4 border: 1px solid red; 5 width: 350px; 6 } 7 .floatL { 8 width: 100px; 9 height: 100px;10 border: 1px solid #000;11 float: left;12 }13 .floatR {14 width: 100px;15 height: 100px;16 border: 1px solid #000;17 float: right;18 }19 .blue {background: #6AA;}20 .red {background: #A66;}
1 //html 2 <div id="wrapper"> <div class="floatL blue">AAAAAAAA</div> </div>
对其兄弟元素(非浮动)的影响
如果兄弟元素为 块级元素
该元素会忽视浮动元素的而占据它的位置,并且元素会处在浮动元素的下层(并且无法通过z-index属性改变他们的层叠位置),但它的内部文字和其他行内元素都会环绕浮动元素。1 //CSS,其他的样式按照上面给出的,此处就不再重复了2 .block {3 width: 200px;4 height: 150px;5 border: 1px solid #000;6 background: #CCC;7 }
1 <div id="wrapper"> <div class="floatL blue">AAAAAAAA</div> <div class="block">BBBBBBBBB</div> </div>
如果如果兄弟元素为 内联元素
则元素会环绕浮动元素排列。1 <div id="wrapper">2 <div class="floatL blue">AAAAAAAA</div>3 文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字4 </div>
1 <div id="wrapper">2 <div class="floatL blue">AAAAAAAA</div>3 <img src="XXX.png">4 </div>
对其兄弟元素(浮动)的影响
同一个方向的浮动元素:
当一个浮动元素在浮动过程中碰到同一个方向的浮动元素时,它会紧跟在它们后面,可以用这样一个形象的比喻来描述: 在一个购票中心里,某人从一条购票队列跑到旁边的一条购票队列中排队,那自然先跑过去的会先占据前面的位置。但这条购票队列还是位于当前的购票中心中 ,因此这条浮动的队列和正常的文档流队列也依旧在同一个父元素当中。1 <div id="wrapper">2 <div class="floatL red">AAAAAAAA</div>3 <div class="floatL blue">BBBBBBBBBB</div>4 </div>
反方向的浮动元素:
正如上面的比喻所述,我们可以假设购票中心里左右两边的各有一个购票点(如图,这里我们把一个div看做一个购票者),左浮动的队列可看做左购票点的购票队列,反方向的浮动(即右浮动)则是右边购票点的购票队列,所以在购票中心足够宽的时候两条队列的人群是互不受影响的。因此他们在同一条水平线上。1 <div id="wrapper">2 <div class="floatL red">AAAAAAAA</div>3 <div class="floatR blue">BBBBBBBBBB</div>4 </div>
但当购票中心过窄或者左右两边的购票队列过长时,其中一条队列则会另起一行排列(此处为B队列,有人可能会问为什么不是A队列另起一行?从下面HTML结构上可知,这是因为在时间上,A队列比B队列更早地建立,根据先到先得的原则,B队列的购票者在位置不够的时候自然要另起了一行了)。1 <div id="wrapper">2 <div class="floatL red">AAAAAAAA</div>3 <div class="floatL red">AAAAAAAA</div>4 <div class="floatR blue">BBBBBBBBBB</div>5 <div class="floatR blue">BBBBBBBBBB</div>6 </div>
当同一行中连一个购票者的位置都容不下时,两条队列则会错开两行1 <div id="wrapper">2 <div class="floatL red">AAAAAAAA</div>3 <div class="floatL red">AAAAAAAA</div>4 <div class="floatL red">AAAAAAAA</div>5 <div class="floatR blue">BBBBBBBBBB</div>6 <div class="floatR blue">BBBBBBBBBB</div>7 </div>
float对自身元素的影响
float对象将被视作块对象(block-level),即display属性等于block。
float对子元素的影响
我们知道当一个元素浮动时,在没有清楚浮动的情况下,它无法撑开其父元素,但它可以让自己的浮动子元素撑开它自身,并且在没有定义具体宽度情况下,使自身的宽度从100%变为自适应(浮动元素display:block)。其高度和宽度均为浮动元素高度和非浮动元素高度之间的最大值。
1 //这里我们去掉#wrapper的固定宽度,并在其外部增加一个固定宽度的div,以便更好地展示2 <div class="container">3 <div id="wrapper">4 <div class="floatL red">AAAAAAAA</div>5 <div class="floatL red">AAAAAAAA</div>6 </div>7 </div>
1 <div class="container">2 <div id="wrapper" style="float:left;">3 <div class="floatL red">AAAAAAAA</div>4 <div class="floatL red">AAAAAAAA</div>5 </div>6 </div>
1 .block {2 width: 250px;3 height: 50px;4 border: 1px solid #000;5 background: #CCC;6 }
1 <div class="container">2 <div id="wrapper" style="float:left;">3 <div class="floatL red">AAAAAAAA</div>4 <div class="floatL red">AAAAAAAA</div>5 <div class="block"></div>6 </div>7 </div>
1 .block {2 width: 150px;3 height: 150px;4 border: 1px solid #000;5 background: #CCC;6 }
float对父元素之外的元素的影响
父元素之外的非浮动元素
从上面可知,当一个元素浮动时,在没有清楚浮动的情况下,它无法撑开其父元素,也就是父元素的宽高都为0。并且其父元素之外的非浮动元素也会无视该浮动元素,浮动元素仿佛到了另外一个世界里。
1 //CSS2 .outer {3 height:150px;4 width: 350px;5 border:1px solid blue;6 }
1 //HTML2 <div id="wrapper">3 <div class="floatL red">AAAAAAAA</div>4 </div>5 <div class="outer"></div>
父元素之外的浮动元素
当浮动元素的父元素之外的元素为浮动元素时,他们仿佛去到了同一个世界里。
两个元素的浮动方向相同时:1 <div id="wrapper">2 <div class="floatL red">AAAAAAAA</div>3 </div>4 <div class="outer" style="float:left;"></div>
两个元素的浮动方向相反时:
1 //CSS,这里我们在他们外面增加一个固定宽高的div以便展示,否则右浮动的元素会浮动到body的右边界2 .container {3 width:650px;4 height: 250px;5 border: 1px solid #000;6 }
1 <div class="container">2 <div id="wrapper">3 <div class="floatL red">AAAAAAAA</div>4 </div>5 <div class="outer" style="float:right;"></div>6 </div>
1 <div class="container">2 <div id="wrapper">3 <div class="floatL red">AAAAAAAA</div>4 <div class="floatL red">AAAAAAAA</div>5 <div class="floatL red">AAAAAAAA</div>6 <div class="floatL red">AAAAAAAA</div>7 </div>8 <div class="outer" style="float:right;"></div>9 </div>
- CSS学习笔记---float的深入剖析
- css之float深入剖析
- 【css学习笔记】深入理解之float
- float的深入学习
- 【转】CSS FLOAT 学习笔记
- css学习笔记之float
- css 学习笔记 position float block 的理解
- css之float的深入理解
- CSS深入理解的学习笔记
- CSS学习笔记----float简单实现
- CSS学习笔记——CSS中定位的浮动float
- 深入剖析CSS的相对定位
- CSS的深入学习
- Cocos2d-x学习笔记-- 深入剖析HelloWorld
- oracle学习笔记 buffer状态深入剖析
- CSS float浮动的深入研究、详解及拓展(一)
- CSS float浮动的深入研究、详解及拓展(二)
- 对CSS中的Position、Float属性的一些深入探讨
- Android应用程序耗电那点事
- 初学sevlet+jsp登录
- ***稀疏表达:向量,矩阵,张量
- 不活动页面 一段时间后 自动退出 回到首页页面
- iphone开发--获取当前app的版本号
- CSS学习笔记---float的深入剖析
- xcode 4 制作静态库详解
- PostpreSQL详细数据类型说明
- 判断包以什么字母开头
- oracle 存储过程的基本语法
- CATransition的动画效果类型及实现方法
- 容器
- 养成良好的习惯-每个测试文件前输入标识自己的字符串
- Sql2008数据库转到sql2005