css的文档流,float浮动和position定位

最新推荐文章于 2022-10-16 19:32:08 发布

贾宇东

最新推荐文章于 2022-10-16 19:32:08 发布

阅读量687

点赞数 2

分类专栏： css 文章标签： css 布局

本文链接：https://blog.csdn.net/jyd820226378/article/details/51960422

版权

css 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

因为最近不少的学弟学妹问我css布局的问题，我就将大家的疑惑点大概总结了一下，把你们一些比较疑惑的知识给你们讲一下。

1.文档流

因为定位经常就涉及到一个词脱离文档流,可能之前不了解文档流，我就详细的讲解一下：

因为css的定位机制有三种，普通流，float（浮动），position(定位)

普通流:正常的文档流，在HTML里面的写法就是从上到下，从左到右的排版布局。即块元素（block）独占一行，内联元素（inline）。不独占一行，例如:

<body>
  <div id="01"></div>
  <div id="02"></div>
  <div id="03"></div>
</body>

很显然这是最普通的文档流，一个挨一个按照顺序01先，02其次，03最后排列。

但是如果给某一个div进行float操作或者absolute定位，则其脱离文档流，但要注意，float和绝对定位的脱离文档流是有区别的，absolute定位是完全脱离文档流，脱离后完全不占空间，但是float脱离文档流是不彻底的，我也看了不少博客，上面各种说法都有，不过我还是比较赞同其中的一种说法，float虽然脱离了文档流，但是他是不彻底的脱离，他脱离了文档流还存在网页流中，因为最早设计浮动这个机制的时候，就是为了实现文字环绕在图片周围的效果。所以浮动的时候，文字会环绕在浮动元素周围。还在占用空间。

2.float浮动

上边已经粗略的讲解了下float的原理，接下来就详细的讲讲各个属性

float有四个属性，分别是float,right,none,Inherit。上述的移动到父元素最左和最右是指元素往左或往右移动直到碰到另一个浮动元素或父元素内容区的边界（不包括padding）,none是默认的意思是不浮动,inherit是继承父级元素的float值

float除了简单的图片周围包围文字，浮动可用全部的网页布局，但是float也会产生很多的影响

对父元素的影响对于其父元素来说，元素浮动之后，它脱离当前正常的文档流，所以它也无法撑开其父元素，造成父元素的塌陷，效果如下图所示

<style type="text/css">
    #wrapper {
    padding: 20px;
    border: 1px solid red;
    width: 350px;
    }
    .floatL {
        width: 100px;
        height: 100px;
        border: 1px solid #000;
        float: left;
    }
    .floatR {
        width: 100px;
        height: 100px;
        border: 1px solid #000;
        float: right;
    }
    .blue {background: red;}
    .red {background: blue;}
  </style>
</head>
<body>
<div id="wrapper">
    <div class="floatL blue">AAAAAAAA</div>
</div>
</body>

产生的效果如图所示

1.对兄弟元素的影响：如果兄弟元素为块级元素，该元素会忽视浮动元素的而占据它的位置，并且元素会处在浮动元素的下层（并且无法通过z-index属性改变他们的层叠位置），但它的内部文字和其他行内元素都会环绕浮动元素。

2.同一个方向的浮动元素：当一个浮动元素在浮动过程中碰到同一个方向的浮动元素时，它会紧跟在它们后面，可以用这样一个形象的比喻来描述：在一个购票中心里，某人从一条购票队列跑到旁边的一条购票队列中排队，那自然先跑过去的会先占据前面的位置。但这条购票队列还是位于当前的购票中心中，因此这条浮动的队列和正常的文档流队列也依旧在同一个父元素当中。
如下：

<div id="wrapper">
    <div class="floatL red">AAAAAAAA</div>
    <div class="floatL blue">BBBBBBBBBB</div>
</div>

效果图:

float对自身的影响

float对象将被视作块对象(block-level)，即display属性等于block。我们知道当一个元素浮动时，在没有清除浮动的情况下，它无法撑开其父元素，但它可以让自己的浮动子元素撑开它自身，并且在没有定义具体宽度情况下，使自身的宽度从100%变为自适应（浮动元素display:block）。其高度和宽度均为浮动元素高度和非浮动元素高度之间的最大值。

3.position定位

position定位比较容易理解，所以我也就简单说说:

1.position:relative; 如果对一个元素进行相对定位，首先它将出现在它所在的位置上。然后通过设置垂直或水平位置，让这个元素”相对于”它的原始起点进行移动。（再一点，相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其他框）
所以相对定位：relative 没有脱离正常的文档流，被设置元素相对于其原始位置而进行定位，其原始占位信息仍存在

2.position:absolute; 表示绝对定位，位置将依据浏览器左上角开始计算。绝对定位使元素脱离文档流，因此不占据空间。普通文档流中元素的布局就像绝对定位的元素不存在时一样。（因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其他元素并可以通过z-index来控制它层级次序。z-index的值越高，它显示的越在上层。）absolute 脱离了文档流与浮动模型，独立于其他对象而存在，没有占位。

3.父容器使用相对定位，子元素使用绝对定位后，这样子元素的位置不再相对于浏览器左上角，而是相对于父窗口左上角.

具体例子也就不列举了~有疑问可以随时咨询