前言 为了更好理解浮动和position，建议先看看我写的这篇文章《Html文档流和文档对象模型DOM理解》正文 一、浮动 CSS设计float属性的主要目的，是为了实现文本绕排图片的效果。然而，这个属性居然也成了创建多栏布局最简单的方式。 如何浮动一个元素？先设定其宽度 ...
前言
为了更好理解浮动和position，建议先看看我写的这篇文章《Html文档流和文档对象模型DOM理解》
正文
一、浮动
CSS设计float属性的主要目的，是为了实现文本绕排图片的效果。然而，这个属性居然也成了创建多栏布局最简单的方式。
如何浮动一个元素？先设定其宽度width，再增加样式规则float:left/right。
//注意：该浮动元素已从正常文档流中删除。浮动元素是被块级元素忽略的元素，但是内联元素知道它们在哪里，内联元素会留意浮动元素的边界，而块元素会正常流向页面。
提到浮动，就得提清除浮动clear。如下图：
因为块级元素不知道左侧浮动元素的存在（浮动元素不在文档流中），所以块级元素会铺满整个区域。可以用元素的CSS clear属性来提出请求：当元素流入页面时，在这个元素的左边、右边或两边不允许有浮动内容。
添加样式clear:left; 这样，块级元素就会在浮动元素的下面了。
想了解更多浮动的知识，请看例子。
二、position
position属性有4个值:static、relative、absolute、fixed。
(一)static
HTML元素的默认值，即没有定位，元素出现在正常的流中。静态定位的元素不会受到top, bottom, left, right影响。
(二)relative
相对的是元素原来在文档流中的位置（或者默认位置）。相对定位会让元素正常地流入页面，不过在页面上显示之前要进行偏移。
//注意：这个元素原来占据的空间保留着，其他元素没改变位置。相对定位元素经常被用来作为绝对定位元素的容器块。
(三)absolute
绝对定位会把元素从文档流中删除，块元素和内联元素都不知道它的存在，绝对定位的元素的定位上下文是最近的已定位父元素，其默认的定位上下文<body>元素。
//绝对定位元素的任何祖先元素都可以成为它的定位上下文，只要把相应祖先元素的position设定为relative/fixed即可。
(四)fixed
固定定位会把元素从文档流中删除，块元素和内联元素都不知道它的存在，其定位上下文是视窗口。
ps：relative、absolute、fixed有z-index属性。
海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理：https://www.xlkjsw.com
原标题：理解浮动和position定位
关键词：
*特别声明：以上内容来自于网络收集，著作权属原作者所有，如有侵权，请联系我们：
admin#shaoqun.com
（#换成@）。
