Float布局

来源：互联网发布：照片归类软件编辑：程序博客网时间：2024/05/20 23:06

语法：float:none|left|right

None:对象不浮动

Left:左浮动

Right:右浮动

Float对标签的影响;

1)对行内属性标签的影响

能很好的支持height,width,margin,padding属性的设置

2）对块属性标签的影响

3）可以使块属性元素在一排排列，默认占满行的块属性标签在没有设置宽高的情况下设置浮动后变成内容撑间解析标签时enter键造成的显示间隙问题

具有float属开宽度高度，同样支持宽高设置

4）解决浏览器之性的对象在父标签中是不占空间的

5）浮动会产生层叠效果，但是内容（例：图片、文字）不会被层叠

示例：

<!doctype html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <style>        *{            margin:0;            padding: 0;        }        .out{            height: 300px;            width: 600px;            border:1px solid red;        }        .out div{            width: 100px;            height: 100px;        }        .out div.left{            float: left;            background: red;        }        .out div.right{            float: right;            background: #ccc;        }    </style></head><body>    <div class="out">        <div class="left"></div>        <div class="right"></div>    </div></body></html>

清除浮动的5种方式：

1）Clear

使用情况：由于元素的float，为了不影响下面元素的显示。通常在这个浮动元素的后面加上<div class=“clear”> </div>来消除对后面元素显示的影响。

Html:

<div class=”clear”> </div>

Css:

.claer{Clear:both;  /*清除所有浮动*/Height:0;   /*因为加空格的原因，所以要设定宽度为0*/Overflow:hidden;  /*为了兼容ie6*/}

2）Position

 .out{Position:absolute;}

3）Overflow

如果一个父标签内有float的子元素，给父元素设置Overflow:hidden属性，则可清除子元素的浮动

   .out{Overflow:hidden;}

4）Float

子标签浮动，给父标签浮动

标签嵌套时，如果父子标签均浮动则不用给子标签清浮动

5）After

 .out:after{Content:”随便写”;Display:block;Height:0;Clear:both;Overflow:hidden;}

选择清除浮动位置时我们应该注意以下二点：

1）清除浮动一定要在浮动标签完成布局后进行添加，否则会影响到浮动标签的布局

2）清除浮动必须与前面的浮动标签属于同级关系

Ie6下的横向双倍margin bug

Ie6会在特定的条件下，将设置的横向margin值变成双倍，条件：

①元素必须浮动（float）

②元素必须具有横向margin，margin-left、margin-right

③元素必须是块元素

④浏览器必须是ie6

解决方法：为这个元素定义的css最后加上display：inline

竖向margin的叠加，但是这是针对未浮动（float）的元素，如果元素浮动，那么上下间的margin仍然会采取加法而不是取其大者

-------------------------------------------------华丽的分割线--------------------------------------------

Float的移动原理：先浮后动

A元素如果是左浮动，首先会找上一个设置了左浮动的元素（B），然后沿B元素的右边浮上去，然后再左移，如果在上浮过程中没有空间容纳下A元素，A便会以B的底边为基线左移。

A元素如果是右浮动，首先会找上一个设置了右浮动的元素（B），然后沿B元素的左边浮上去，然后再左移，如果在上浮过程中没有空间容纳下A元素，A便会以B的底边为基线右移。

阅读全文

0 0