<!-- float 对布局的影响 -->
<!-- 当不设置设置第二个div的float为left时,就像第一个
div不存在一样,但是显示的时候要受到第一个div的影响
-->
<div id="d1" style="border: 1px solid blue;">
<div style="float:left;height: 10px z-index: 100">11</div>
<div style="float:left;border: 1px solid black;background-color: red">
<div style="font-size: 24px;">22</div>
<div>22</div>
<div>22</div>
<div>22</div>
<div>22</div>
<div>22</div>
<div>22</div>
</div>
<div style="clear: both">
333</div>
</div>
<p >
<!-- float 对border的影响 -->
<!-- 当设置第三、四个div的float属性为float时,在页面显示上IE和FireFox会有区别 -->
<!-- IE下,这两个div会包括在border之内 -->
<!-- FireFox下,这两个div不会包括在border之内 -->
<div id="d2" style="clear: both;border-bottom: 1px solid yellow; width: 400px">
<div>11</div>
<div>
<div>22</div>
<div>22</div>
<div>22</div>
<div>22</div>
<div>22</div>
<div>22</div>
<div>22</div>
</div>
<div style="float: left;width: 150px" >
333</div>
<div style="float: left;width: 150px" >
444</div>
</div>
<p>
<!-- margin 0px auto 对居中的影响 -->
<!-- 上下页面空白为 0px, 左右页面空白自适应并且相等,可以达到横向居中的效果 -->
<!-- 此属性在IE浏览器下无用,要使居中 需要设置 text-align: center; -->
<!-- 在Firefox下,直接使用即可 -->
<div id="d3" style="clear: both;border: 1px solid black; text-align: center;">
<div id="d4s" style="width:100;height:100;margin:0px auto">margin 0px auto 对居中的影响</div>
</div>
子元素在将floating属性设置为left时,会脱离父节点的束缚,这时候将父节点的float也设置为left,就可以了
分享到:
相关推荐
DIV+CSS布局:CSS浮动float属性详解 不解释
DIV+CSS布局:CSS浮动float属性详解[归纳].pdf
DIVCSS布局:CSS浮动float属性详解
一般来说,可以使用CSSposition属性进行布局,或者使用CSSfloat属性布局。前者适合布局首页,因为首页上的内容往往可以完全控制。后者适合布局模板,模板中填充的内容你没法控制——比如,在编辑wordpress模板时,你...
1.Position、Float属性的基本使用方法2.Position、Float属性对元素所造成的影响3.Position、Float属性交叉使用上面的影响4.Position、Float属性使用上的小技巧 本文结构点: 1.HTML布局的基本要点(点我直接跳转) ...
CSS 为定位和浮动提供了一些属性,利用这些属性,可以建立列式布局,将布局的一部分与另一部分重叠,还可以完成多年来通常需要使用多个表格才能完成的任务。
布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。 2009年,W3C提出了一种新的方案—-Flex布局,可以简便、完整、...
三栏布局是最常见的网页布局,主要页内容放在中间一栏,边上的两栏放置导航链接之类的内容。基本布局一般是标题之...左栏div和右栏div都是固定宽度的,并且用float属性来把它们挤压到浏览器窗口的左侧和右侧。中栏实际
有3个属性和布局以及box的创建有关:’display’, ‘position’ 和 ‘float’,彼此交互作用如下: 如果’display’值为’none’,则’position’ 和 ‘float’无作用。这种情况下,不生成box。 否则,如果’...
...
...
页面布局方式,主要包含:文档流、浮动层、float属性。 文档流 HTML页面的标准文档流(默认布局)是:从上到下,从左到右,遇块(块级元素)换行。 浮动层 浮动层:给元素的float属性赋值后,就是脱离文档流,进行左右...
这个浮动是可以清除的,一般不会影响整体布局。而position,定位,是不受约束的,这个貌似都谈不上布局了,一般要是做什么特殊的定位或者浮动层的时候,可以考虑使用。正常页面布局,我个人建议用FLOAT
1:float属性 2:float属性的特性 2.1:float之文字环绕效果 2.2:float之父元素高度塌陷 3:清除浮动的方法 3.1:html法 3.2:css伪元素法 4:float去空格化 5:float元素块状化 6:float流体布局 ...
本篇文章主要介绍了css中Float属性, 顾名思义,就是让设置的标签产生浮动效果,就是脱离原来页面的标准输出流。