本文主要是介绍CSS_11——布局（简单记录），对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

1. 布局

1.1 float属性

清除浮动：clear属性

1.2 position属性（定位）

position

可实现双列、三列布局

absolute

粘滞定位

positon：sticky

1.float

float：浮动。float刚开始并不是为了用来网页布局，而是用来解决图文信息中图片与文本冲突的问题的。
如下图：

image.png

这种常见的图文效果，没有float之前是很难达到的。有了float之后只需要加一个float：left，轻松搞定。

<style>
    .content{
        margin: 100px auto;
        width: 300px;
    }
    .box{
        float: left;
    }
</style>

    <div class="content">
        <div class="box"><img src="./imgs/authority-employee.png" alt=""></div>
        <div class="text">CSS（层叠样式表）是一种用来表现HTML或XML等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。有三种方法可以在站点网页上使用样式表：外部样式表、内部样式表和内联样式。</div>
    </div>
 

‘咦，如果float可以处理图文的问题，那用来布局不也可以吗？’，后来有人用float试着用于网页布局，还真的可以。
网页中最常见的布局如下：

网页常见布局.png

用float做

<style>
    body,ul,li{
        padding: 0;
        margin: 0;
        list-style: none;
    }
   .header{
       height: 100px;
       background-color: hotpink;
   }
   .nav{
        height: 100px;
        line-height: 100px;
        text-align: center;
   }
   .nav li{
       float: left;
       width: 100px;
       height: 100px;
       margin-left: 20px;
       background-color: yellowgreen;
   }
   .main{
       width: 1000px;
       height: 500px;
       margin: 0 auto;
   }
   .article{
       width: 800px;
       height: 500px;
       background-color:yellow; 
       float: left;
   }
   .aside{
       width: 200px;
       height: 500px;
       background-color:skyblue; 
       float: left;
   }
   .footer{
       height: 100px;
       background-color: greenyellow;
   }
</style>


    
    <div class="header">
        
        <ul class="nav">
            <li><a href="#">导航1</a></li>
            <li><a href="#">导航2</a></li>
            <li><a href="#">导航3</a></li>
        </ul>
        
    </div>
    

    
    <div class="main">
        
        <div class="article"></div>
        

        
        <div class="aside"></div>
        

    </div>
    

    
    <div class="footer"></div>
    
 

比table布局要方便不少，不过float随之而来的带来了 “浮动高度塌陷”的问题：
如果浮动元素的父元素没有设定高度，当其子元素浮动后，父元素就因为内部没有子元素撑起从而高度变为0；
引申：网页元素一般分为 普通流，浮动流，定位流。其中普通流和浮动流在一个层级上，定位流>浮动流>普通流。
之后为了解决这个问题搞出来一系列清除“浮动高度塌陷”的策略方法，非常麻烦。

2.position

position：定位；顾名思义，就是确定位置。position同样可以用做网页布局。

<style>
    body,ul,li{
        padding: 0;
        margin: 0;
        list-style: none;
    }
   .header{
       height: 100px;
       background-color: hotpink;
   }
   .nav{
        height: 100px;
        line-height: 100px;
        text-align: center;
        /*父元素用相对定位*/
        position: relative;
   }
   .nav li{
       /*子元素用绝对定位*/
       position: absolute;
       width: 100px;
       height: 100px;
       background-color: yellowgreen;
   }
   .nav li:nth-child(1){
       left: 20px;
   }
   .nav li:nth-child(2){
       left: 140px;
   }
   .nav li:nth-child(3){
       left: 260px;
   }
   .main{
       width: 1000px;
       height: 500px;
       margin: 0 auto;
       position: relative;
   }
   .article{
       width: 800px;
       height: 500px;
       background-color:yellow; 
   }
   .aside{
       width: 200px;
       height: 500px;
       background-color:skyblue; 
       position: absolute;
       top: 0;
       right: 0;
   }
   .footer{
       height: 100px;
       background-color: greenyellow;
   }
</style>


    
    <div class="header">
        
        <ul class="nav">
            <li><a href="#">导航1</a></li>
            <li><a href="#">导航2</a></li>
            <li><a href="#">导航3</a></li>
        </ul>
        
    </div>
    

    
    <div class="main">
        
        <div class="article"></div>
        

        
        <div class="aside"></div>
        

    </div>
    

    
    <div class="footer"></div>
    
 

同样的效果

image.png

不过position需要计算每一个元素的位置，而且这个位置是定死的，略显繁琐和笨重。实际上position我平常只用来定位一些小的标签之类的东西。position优点在于不像float那样会影响其他元素。
关键点：子绝父相。需要定位的元素用absolute绝对定位，其父元素用 relative相对定位。还有fixed固定定位，他是以html为父元素的定位。

3.flex（推荐）

flex：弹性；弹性布局很好的解决了float和position的问题，非常好用。
使用方法：
在父元素使用 display:flex;确定弹性作用的范围。
然后
justify-content：center（space-around，space-between等）；水平方向布局；
align-items:center(flex-start,flex-end等);垂直方向布局；

<style>
    body,ul,li{
        padding: 0;
        margin: 0;
        list-style: none;
    }
   .header{
       height: 100px;
       background-color: hotpink;
   }
   .nav{
        height: 100px;
        line-height: 100px;
        text-align: center;
        display: flex;
   }
   .nav li{
       /*子元素用绝对定位*/
       width: 100px;
       height: 100px;
       margin-left: 20px;
       background-color: yellowgreen;
   }
   .main{
       width: 1000px;
       height: 500px;
       margin: 0 auto;
       display: flex;
   }
   .article{
       width: 800px;
       height: 500px;
       background-color:yellow; 
   }
   .aside{
       width: 200px;
       height: 500px;
       background-color:skyblue; 
   }
   .footer{
       height: 100px;
       background-color: greenyellow;
   }
</style>


    
    <div class="header">
        
        <ul class="nav">
            <li><a href="#">导航1</a></li>
            <li><a href="#">导航2</a></li>
            <li><a href="#">导航3</a></li>
        </ul>
        
    </div>
    

    
    <div class="main">
        
        <div class="article"></div>
        

        
        <div class="aside"></div>
        

    </div>
    

    
    <div class="footer"></div>
    
 

2. z-index

一旦修改元素的定位方式，元素可能发生堆叠，可以使用z-index来控制有元素在框中出现的堆叠数值

Z-index：value 数值越大，级别越高，越显示在前

3. BFC

3.1 简介

块格式化上下文（Block Formatting Context，BFC） 是Web页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。

注意：一个BFC的范围包含创建该上下文元素的所有子元素，但不包括创建了新BFC的子元素的内部元素。这从另一方角度说明，一个元素不能同时存在于两个BFC中。因为如果一个元素能够同时处于两个BFC中，那么就意味着这个元素能与两个BFC中的元素发生作用，就违反了BFC的隔离作用。

3.2 BFC触发方式

1. 根元素，即HTML标签
2. 浮动元素：float值为left、right
3. overflow值不为 visible，为 auto、scroll、hidden
4. display值为 inline-block、table-cell、table-caption、table、inline-table、flex、inline-flex、grid、inline-grid
5. 定位元素：position值为 absolute、fixed

注意：display:table也可以生成BFC的原因在于Table会默认生成一个匿名的table-cell，是这个匿名的table-cell生成了BFC。

BFC可以实现容纳浮动元素、组织文本环绕

4. 参考

转载CSS布局：float、position、flex

这篇关于CSS_11——布局（简单记录）的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！