深刻css布局 (2) — 定位与浮动

时间 2020-05-30

标签深刻 css 布局定位浮动栏目 CSS 繁體版

原文原文链接

深刻css布局(2) — 定位与浮动

在css知识体系中，除了css选择器，样式属性等基础知识外，css布局相关的知识才是css比较核心和重要的点。今天咱们来深刻学习一下css布局相关的知识。css

上篇文章咱们讲完了css布局中盒模型和元素分类的相关知识，同时介绍了box-sizing和行框。这篇咱们继续...html

1、定位与浮动

上篇咱们讲解了不一样类型元素的特色，咱们能够随意的排列组合他们来达到咱们想要的效果。可是他们都是基于一个二维平面的，若是咱们想在布局中有遮挡，重叠之类的更丰富效果，咱们就须要使用到定位和浮动的相关知识。前端

1.1 文档流

文档流就是按照页面元素书写的顺序，将页面元素按从左到右，从上至下的通常顺序进行排列。那么也就能够理解成咱们刚才所说的一个二维平面的概念。css3

那么若是我想要实现更丰富的效果，就须要脱离文档流，在一个新的平面上去显示，这样咱们就能够在屏幕上有多个平面叠加显示的效果了，那么这就是浮动和定位的工做了。浏览器

1.2 定位

定位容许你使用 position 属性，将一个元素相对于他本身或者他的祖先元素甚至是浏览器窗口经过 top , left , right , bottom 属性进行偏移。微信

根据 position 属性的取值，元素能够分为静态定位元素static（默认值）、相对定位元素relative、绝对定位元素absoute和固定定位元素fixed。markdown

首先咱们抛开static这个默认值，由于他基本不属于定位的范畴，由于元素默认就是static，他就至关因而依据文档流显示。app

当咱们使用定位时，须要position属性和top,left,right,bottom这两类属性共同参与来决定一个元素的 定位类型 和 偏移量 。布局

使用方法很简单，这里说下他们之间的区别:学习

relative相对定位

元素根据其在当前文档流所在位置做为参考系，进行偏移。

定位以后原来元素在文档流中的位置会被空出来，不会被其余元素所占据。

absolute绝对定位

元素会将其带有position为非static的祖先元素做为参考系进行偏移。

若是祖先元素里没有带有position为非static的，则会以首屏做为参考系。

定位后，原来在文档流中占据的位置，会被其余元素所占据。

fixed固定定位

根据当前可视区进行定位，因此当文档流为多屏可滚动时，fixed定位的元素会跟随滚动而滚动。

跟absolute定位同样，定位后，原来在文档流中占据的位置，会被其余元素所占据。

1.3 包含块

包含块就是个专有名词，其实概念很简单，这里了解一下就好。

包含块是一个矩形区域，当元素设置属性的百分比的时候，好比width：50% 或者 top: 10%，其参考系就是他的包含块。

大部分时候对于文档流里的元素，其包含块指的都是其父元素的区域。

对于定位元素来讲，相对定位元素包含块也是其父元素区域；

绝对定位元素的包含块是其带有position为非static的祖先元素区域。若是其没有这样的祖先元素的话其包含块为首屏显示区域，这个区域也有个专有名词叫作初级包含块。

固定定位元素的包含块就是当前可视区的区域。

1.4 浮动

浮动容许你将元素浮动起来，脱离文档流向左或者向右移动。直到它的外边缘碰到包含框或另外一个浮动框的边框为止。

虽然浮动也脱离文档流显示，可是与定位不一样的是 inline 和 inline-block 的元素能够识别这种因浮动而脱离的文档流，从而不发生重叠。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style> * { margin: 0; padding: 0; } .float { width: 40px; height: 40px; background: blue; float: left; } p{ display: inline-block; width: 100px; height: 100px; background: red; } </style>
</head>
<body>    
    <div class="float"></div>
    <p>LearnInPro  LearnInPro  LearnInPro</p>
</body>
</html>

咱们会发现p元素并无占据掉浮动元素的位置，而后咱们将上面的代码稍做修改，将p元素的display改成block咱们就会发现

虽然这样p标签占据了float元素的位置，可是标签里面的文本则不会去占据float元素的位置。

这个设定实际上是有些诡异的。另外说一句，在css历史上浮动这个东西一开始被造出来是为了实现文字围绕图片这种效果的而不是用来作布局的，当时只有图片能够设置浮动效果，可是后来慢慢全部元素均可以浮动而且基于浮动有了本身的布局体系，全部因为历史缘由相对来讲浮动的规则是比较乱的小部分还有些诡异的。有些地方咱们记住就好。

咱们来具体看下浮动的规则：浮动元素会从最后一行最左侧的空白位置开始浮动，如当前行没法容纳下本身宽度，则垂直下沉到下一行，向左或者向右碰到包含框或另外一个浮动框的边框为止。咱们这里举两个例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style> .float{ width: 30%; height: 40px; border: 1px solid black; float: left; } </style>
</head>
<body>
    <div class="float">flaot1</div>
    <div class="float" style="height: 60px;">flaot2</div>
    <div class="float">flaot3</div>
    <div class="float">flaot4</div>
    <!--<div class="float" style="width: 10px;">flaot5</div>-->
</body>
</html>

这里float4在float3右侧空白位置起始，发现当前行没法容纳下本身则垂直向下到下一行，向左移动，在碰到包含块以前，碰到了float2的边框，因而就会在float2的右边框处中止浮动。

以后咱们将代码稍做修改，把float5这行注释删掉，咱们会发现，一开始float5的起始位置就是在float4这行的右侧空白区域，当前行可容纳下本身，因而就停在了float4的右侧。虽然第一行也就是float3这行右侧空白区域也空着，能够放得下float5，可是float5的起始位置并不会在第一行，因此最终即便第一行有位置能够显示下float5，它也不会在那里显示。

1.4 清除浮动

首先为啥要清除浮动？

因为浮动元素会脱离文档流显示，因此在浮动元素后面的块级元素会默认占据这些元素的位置，就会形成这些块级元素会在浮动元素的下层显示，出现浮动元素盖住后面正常文档流元素的效果，但这每每不是咱们想要的结果。

其做用是改变 使用清除浮动的这个元素 与 前一个声明的浮动元素 之间的默认布局规则，让 使用清除浮动的这个元素 在新的一行中显示。

如何清除浮动

clear属性，其值为left | right | both。

浮动元素或者非浮动元素的块级元素均可以使用这个属性来清除浮动（咱们以前说inline和inline-block元素能够自动识别浮动，因此他们不须要清除浮动），他们的做用对象是前一个声明的浮动元素。若是使用 clear:left | right 则是清除前一个float为left或者right的元素的浮动，clear：both则是清除前一个浮动元素，不管它是向哪边移动。那么使用clear属性的元素会在浮动元素的下方新开一行显示。

清除浮动的特殊应用

清除浮动能够解决父元素高度塌陷问题。当一个元素包裹了一些float元素的时候，因为float元素脱离文档流显示，因此父元素没法被这些元素撑开高度，致使父元素高度为0。

那么最经常使用的一种解决方案是：设置父元素的after伪元素的clear属性 来让其撑开父元素的高度。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .clearfix {
            background: gray;
            border: 1px solid black;
        }
        .float {
            width: 200px;
            height: 100px;
            background: red;
            float: left;
        }
        .clearfix:after,
        .clearfix::after{
            content: " ";
            display: block;
            clear: both;
            visibility: hidden;
            height: 0;
        }
    </style>
</head>
<body>
    <div class="clearfix">
        <div class="float">float</div>
    </div>
</body>
</html>

当咱们没有设置clearfix的after伪元素时，会发现clearfix的高度为0，只有边框会显示出来。咱们经过设置clearfix的after伪元素来让咱们在不须要新增标签的状况下就能够清除掉浮动，而且clearfix类还能够复用。

注意点：

content和display属性会将after伪元素渲染出来，加上clear: both实现一个真实标签清除浮动的效果。

在通常浏览器中不设置visibility和height是没有问题的，但为了增长代码健壮性和规范性，建议加上。

:after 和 ::after的区别：:after的写法是css2的，能够兼容到IE8，::after的写法是css3中规定的，用以区分伪类(:hover)和伪元素(::before)。

定位与浮动的相关知识点就讲的差很少了，下篇文章会去讲下merge的一些问题 和 格式化上下文(formatting context) ，继续把css布局篇完成。

最后你以为咱们的文章对你有帮助，欢迎关注咱们的 微信公众号LearnInPro，在上面你能够第一时间获取到咱们的技术文章，而且你能够随时在上面向咱们提问，把你在学习前端过程当中所遇到的问题发给咱们。咱们天天都会按时回复你们的每个问题，但愿LearnInPro能够伴随你从入门到专家。