第六章 布局浮动

6.1 浮动属性

浮动：css样式表中用float来表示

属性值描述
none 表示不浮动，所有之前讲解的HTML标签默认不浮动
left 左浮动
right 右浮动
inherit 继承父元素的浮动属性

例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动属性用法</title>
    <style type="text/css">
        .left{
            width: 200px;
            height: 200px;
            background-color: red;
            color: #fff;
            /*左浮动*/
             float:left;
        }
        .right{
            width: 200px;
            height: 200px;
            background-color: green;
            color: #fff;
            /*右浮动*/
             float:right;
        }
    </style>
</head>
<body>
    <div class="left">左边的盒子</div>
    <div class="right">右边的盒子</div>
</body>
</html>
观察.left盒子有收缩现象，并且往左边靠。.right也有收缩现象，往右边靠。

6.2 浮动的现象

  • 浮动的元素脱离了标准文档流，即脱标

  • 浮动的元素互相贴靠,贴边

  • 浮动的元素会产生”字围“效果，文字环绕

  • 浮动元素有收缩效果

  • 浮动带来的问题：撑不起父盒子的高度

6.3 标准文档流

  • 文档流指的是元素排版布局过程中，元素会默认自动从左往后，从上往下的流式排列方式。

  • 即不对页面进行任何布局控制时，浏览器默认的HTML布局方式，这种布局方式从左往右，从上往下，有点像流水的效果，我们称为流式布局

  • 脱标

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>脱标</title>
    <style type="text/css">
        .box1{
            width: 200px;
            height: 200px;
            background-color: red;
            float: left;
            color: #fff;
        }
        .box2{
            width: 400px;
            height: 400px;
            background-color: green;
            color: #fff;
        }
    </style>
</head>
<body>
    <div class="box1">左青龙</div>
    <div class="box2">右白虎</div>
</body>
</html>

 

6.4 清除浮动的方式

  • 给父元素添加固定高度 （不灵活，后期不易维护）
    • 应用：万年不变导航栏

　　

  • 内墙法：给最后一个浮动元素的后面添加一个空的块级标签div、p，并且设置该标签的属性为clear:both;
伪元素清除法 推荐大家使用
.clearfix::after{
    content:'';
    display: block;
    clear: both;
    /*visibility: hidden;*/可见的隐藏，当content有内容的时候可以添加visibility和height控制
    /*height: 0;*/
}
overflow:hidden; 常用，超过部分隐藏
overflow：visible;可见的  默认
overflow：scroll;滚动
overflow：auto;与overflow：scroll的效果一样
overflow：inherit; 继承父级的

  • 因为overflow:hidden;会形成BFC区域（b是块，f上下文是格式化），c，形成BFC区域之后，内部有它的布局规则：计算BFC的高度时，浮动元素也参与计算，以最高的浮动元素的高度为基准撑起父级高度 一个bfc区域和另一个bfc区域没有关系，不会重叠，会贴边

  • 但是小心overflow：hidden它自己的本意

#### 深入理解BFC布局

* 布局规则：

  ```css
  1.内部的Box会在垂直方向，一个接一个地放置。
  2.Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
  3.每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
  4.BFC的区域不会与float 元素重叠。
  5.BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
  6.计算BFC的高度时，浮动元素也参与计算
  • 会成为bfc区域的元素
1.根元素
2.float属性不为none
3.position为absolute或fixed
4.display为inline-block
5.overflow不为visible

 

posted @ 2020-04-26 11:36  炜琴清  阅读(153)  评论(0)  编辑  收藏  举报