在CSS 布局中，用 float 和 position 的区别是什么

如题所述

推荐答案 2016-05-11

1ãfloatçå®ä¹åå¸¸è§ç¨æ³ï¼

å®ä¾å¦ä¸ï¼

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            div{
                width:200px;
                height: 200px;
                border: 2px solid pink;
                margin:0 5px;
                float: left;
            }
        </style>
    </head>
    <body>
<div>11111</div>
<div>22222</div>
<div>33333</div>
    </body>
</html>

2ãpositionå®ä¹åç¨æ³ï¼

å¶å±ç¸å¼æï¼

ç»å¯¹å®ä½çå®ä¾ï¼

温馨提示：答案为网友推荐，仅供参考

当前网址：http://11.wendadaohang.com/zd/Pq444qv7884vM8Pq2S7.html

其他回答

第1个回答 2016-05-10

float: left|right; 可以自动排列自动折行, 但需要clear来配合清除浮动;display: inline-block 有些时候可以替代float实现相同的效果.

position: absolute|relative; 要配合top,left等定位;

　　position: absolute会导致元素脱离文档流，被定位的元素等于在文档中不占据任何位置，在另一个层呈现，可以设置z-index。PS的图层效果就是position: absolute。

　　float也会导致元素脱离文档流，但还在文档或容器中占据位置，把文档流和其它float元素向左或向右挤，并可能导致换行。图片的文字环绕布局效果就是float。

　　display的inline-block不脱离文档流，将block元素当作大型字符嵌入文档流内，类似于img或者input默认效果。本回答被网友采纳

相似回答

在CSS 中,用 float 和 position 的区别是什么答：在CSS 中，用 float 和 position的区别如下：1、Float属性 float的属性值有none、left、right，有几个要点：只有横向浮动，并没有纵向浮动。当元素应用了float属性后，将会脱离普通流，其容器（父）元素将得不到脱离普通流的子元素高度。会将元素的display属性变更为block。浮动元素的后一个元素会围绕着...

大家正在搜

position和area的区别 room和position的区别 title和position区别 flex布局和float布局 position和place区别 position和job的区别 cssposition属性区别 css float布局详解 html5float布局注意