首页 > 代码库 > css4种布局技巧-float

css4种布局技巧-float

我所知的常用的布局技巧有四种,原来的三种(1.float布局  2.position布局 3.table布局)以及现在css3新增的flex布局。这四种布局各有优劣

block与inline属性比较

  • display:block
  1. block元素会独占一行,多个block元素会各自新起一行。默认情况下,block元素宽度自动填满其父元素宽度。
  2. block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。
  3. block元素可以设置margin和padding属性。
  • display:inline
  1. inline元素不会独占一行,多个相邻的行内元素会排列在同一行里,直到一行排列不下,才会新换一行,其宽度随元素的内容而变化。
  2. inline元素设置width,height属性无效。
  3. inline元素的margin和padding属性,水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果;但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果。
  • display:inline-block
  1. 简单来说就是将对象呈现为inline对象,但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link(a元素)inline-block属性值,使其既具有block的宽度高度特性又具有inline的同行特性

float属性

1.会以某种方式将浮动元素从文档的正常流中删除,其他元素会环绕该元素

2.float属性的元素会自动生成块级框,按照块级元素来处理,display:block也可以使用,不过没有具体意义

3.浮动元素的规则:

  • 浮动元素的外边距不会合并(与table不相同,在下文会解释)
  • 浮动元素不能超过其包含块的左右边界
  • 浮动元素的的左右边界必须是文档之前出现的浮动元素边界,除非是在正上方或者正下方
  • 后出现的浮动元素必须比先出现的浮动元素低
  • 浮动超出包含块,会另起一行

对上面规则的解释

 

放上一段这样的html代码

1 <div style="border: solid 5px #333; width:300px;">
2   
3         <div  id="redBox" style="height: 100px; width: 100px; background-color: Red;  ">
4         </div>
5         <div id="greenBox" style="height: 100px; width: 100px; background-color: Green;">         
6         </div>
7         <div id="yellowBox" style="height: 100px; width: 100px; background-color: Yellow;">
8         </div>
9     </div>

技术分享

将redBox改为float:left之后

技术分享

greenBox消失了,说明浮动元素首先是从父元素中扣出来,形成新的一层,然后开始浮动。对于原有的元素会覆盖

然而,在greenBox加入文字之后呢,

技术分享

看起来像是在yellowBox里加了文字一样,这是因为文本元素会环绕浮动元素排列,也就是“流动”,而greenBox高度只有100px,所以挤到了他的下边界之外

但是如果greenBox的高度不设置呢,将greenBox的height属性去掉,

技术分享

高度随着文本流改变,就会出现和行高等高的greenBox

如果redBox之后的父元素中有很多文本,就会出现这种情况,

技术分享   技术分享

这就解释了1.会以某种方式将浮动元素从文档的正常流中删除,其他元素会环绕该元素

 

而对于5条浮动规则:

可以这样理解,css每次处理到浮动元素时是不管这个浮动元素上面的元素的,对于这样一段代码

<div style="border: solid 5px #333; width:300px;">
  <p>xxxxxxxxxxxxxxx</p>

        <div  id="redBox" style="height: 100px; width: 100px; background-color: Red;float:left  ">
        </div>
        <div id="greenBox" style="height: 100px; width: 100px; background-color: Green;">        
        </div>
        <div id="yellowBox" style="height: 100px; width: 100px; background-color: Yellow;">
        </div>
    </div>

会出现这样的现象

技术分享

也就述说浮动是以当前浮动元素的原上边界作为浮动的上边界的。

而且浮动块会尽可能的向一个方向浮动,但是不能覆盖其他浮动元素,超出边界 则另起一行

看下面一段代码:

<div style="border: solid 5px #333; width:300px;">
        <div  id="redBox" style="height: 100px; width: 100px; background-color: Red;float:left  ">
        </div>
  
        <div id="greenBox" style="height: 100px; width: 100px; background-color: Green;float:left">        
        </div>
  
        <div id="yellowBox" style="height: 100px; width: 100px; background-color: Yellow;">
        </div>
    </div>
技术分享

如果含有多个浮动块

<div style="border: solid 5px #333; width:300px;">
        <div  id="redBox" style="height: 100px; width: 100px; background-color: Red;float:left  ">
        </div>
  
        <div id="greenBox" style="height: 100px; width: 100px; background-color: Green;float:left">        
        </div>
   <div  id="redBox" style="height: 100px; width: 100px; background-color: Red;float:left  ">
        </div>
  <div id="greenBox" style="height: 100px; width: 100px; background-color: Green;float:left">        
        </div>
        <div id="yellowBox" style="height: 100px; width: 100px; background-color: Yellow;">
        </div>
    </div>

技术分享

这时又会发现,浮动块跑到了父元素的外面,这是因为浮动块是相当于从父元素抠出来的,所以不占位置,所以会超出下边界。

关于父元素塌陷的相关内容,具体可以看这篇博客:http://blog.csdn.net/GoodShot/article/details/44348525

clear属性

clear:left | right | both | none | inherit

clear:left  clear:right 分别是清除左右浮动,clear:both是清除所有,看下面的例子

<div style="border: solid 5px #333; width:300px;">
        <div  id="redBox" style="height: 100px; width: 100px; background-color: Red;float:left  ">
        </div>
  
        <div id="greenBox" style="height: 120px; width: 100px; background-color: Green;float:right">        
        </div>
  
        <div id="yellowBox" style="height: 100px; width: 300px; background-color: Yellow;">
        </div>
    </div>

 

技术分享                       

然后给yellowBox分别设置clear:left,clear:right,clear:both;

 

技术分享            技术分享                   技术分享

以上是我关于浮动的理解

css4种布局技巧-float