浮动布局float

浮动

浮动是 css 里面布局用的最多的属性。

.box1{                      float: left;                      width: 300px;                      height: 400px;                      background-color: yellowgreen;               }               .box2{                      float: left;                      width: 400px;                      height: 400px;                      background-color: skyblue;               }

两个元素并排了，并且两个元素都能够设置宽度、高度了（这在刚才的标准流中，不能实现）。

浮动想学好，一定要知道三个性质。

 

1 浮动的元素脱标

证明 1 ：

 

证明 2 ：

一个 span 标签不需要转成块级元素，就能够设置宽度、高度了。所以能够证明一件事儿，就是所有标签已经不区分行内、块了。也就是说， 一旦一个元素浮动了，那么，将能够并排了，并且能够设置宽高了。无论它原来是个 div 还是个 span 。

span{                       float: left;                      width: 200px;                      height: 200px;                      background-color: orange;               }

 

2 浮动的元素互相贴靠

如果有足够空间，那么就会靠着 2 哥。如果没有足够的空间，那么会靠着 1 号大哥。

如果没有足够的空间靠着 1 号大哥，自己去贴左墙。

右浮动：    float:right;

3 浮动的元素有“字围”效果

HTML ：

<div>               <img src="images/1.jpg" alt="" />        </div>        <p>123 文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字 </p>

让 div 浮动， p 不浮动：

div 挡住了 p ，但是 p 中的文字不会被挡住，形成“字围”效果。

关于浮动我们要强调一点，浮动这个东西，我们在初期一定要遵循一个原则：

永远不是一个东西单独浮动，浮动都是一起浮动，要浮动，大家都浮动。

4浮动的收缩

收缩：一个浮动的元素，如果没有设置 width ，那么将自动收缩为文字的宽度（这点非常像行内元素）。

比如：

<style type="text/css">               div{                      float: left;                      background-color: gold;               }        </style>

这个 div 浮动了，且没有设置宽度，那么将自动缩紧为内容的宽度：

整个网页，就是通过浮动，来实现并排的。

5清除浮动

不清除例子：

第二排的第一个li会去贴靠第一组的最后一个li

因为 div 没有高度，不能给自己浮动的孩子们，一个容器。

1.方法一： 如果一个元素要浮动，那么它的祖先元素一定要有高度。 高度的盒子，才能关住浮动。

2.方法二：clear:both; or clear:left; or clear:right;（清除别人对我的影响）。         问题：margin会失效。

3.方法三（method 3）：

“ 隔墙法 ” ：第二组浮动会去追第二组浮动，利用一个 “ 墙 ” 将两个浮动隔开。之后互不影响。

例：

“ 内墙法 ” ：本质就是给父亲自动撑高

4.方法4（method 4）：overflow:hidden;本意表示溢出隐藏，溢出边框的内容（文字，图片等）都要隐藏。

偏方：一个父亲不能被自己浮动的儿子，撑出高度，只要给父亲加上overflow:hidden;那么，父亲就能被儿子撑出高了。

注：不支持IE6，加上 zoom:1;

转载于:https://www.cnblogs.com/yanqiong/p/6432951.html