十.CSS—网页布局（标准流、浮动流）-一一网

一.标准流

1.1 标准流是浏览器默认的排版方式；
1.2 在 CSS 中将元素分为三类, 分别是块级元素/行内元素/行内块级元素；
1.3 在标准流中有两种排版方式, 如果元素是块级元素, 那么就会垂直排版；如果元素是行内元素/行内块级元素, 那么就会水平排版

二.浮动流

浮动流是一种半脱离标准流的排版方式；
float CSS属性指定一个元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它。该元素从网页的正常流动(文档流)中移除，尽管仍然保持部分的流动性（与绝对定位相反）。
描述性话语:如果有两个块级盒子,第一个设置左浮动，那么第二个盒子会跑到第一个盒子下面，而第二个盒子的内容不会被第一个盒子遮盖，而是环绕他。float设计的初衷也是为了图文环绕;

2.1 语法

/*左浮动*/
float: left;

/* 右浮动*/
float: right;
复制代码

2.2浮动元素是如何定位的

当一个元素左浮动之后，它会被移出正常的文档流，然后向左平移，一直平移直到碰到了所处的容器的边框，或者碰到另外一个浮动的元素。直到填满容器一整行（或者放不下了），之后换行至下一行。

（1）同一个方向上谁先浮动，谁在前面

（2）不同方向上左浮动找左浮动，右浮动找右浮动

复制代码

2.3 浮动详解

1.浮动元素的左右外边界不能超过容纳快(最近的块级祖辈元素)的左右内边界；
2.同方向上浮动排得下贴着，排不下换行，但是必须按照浮动的顺序，左浮动找左浮动，右浮动找右浮动；
3.有三个浮动盒子前两个左浮动，第三个右浮动，浮动后如果第一个第二个不在一行显示，那个第三个就会和第二个在一行右浮动；
复制代码

2.4浮动后的表现

1.半脱标--会脱离文档流，浮起来了，相当于形成了一个新的平面；但是同时形成一个特殊区域，只让其他非浮动流的元素进入占位（消耗宽高），不让文字进入被浮动元素遮盖。

2.字围--浮动元素不会挡住没有浮动的元素中的文字, 没有浮动的文字会自动给浮动的元素让位置,这个就是浮动元素字围现象；

3.贴靠现象：
     1.如果父元素的宽度能够显示所有浮动元素, 那么浮动的元素会并排显示 （浮动盒子总宽小于等于父盒宽）；
     2.如果父元素的宽度不能显示所有浮动元素, 那么会从最后一个元素（已经浮动摆好了的）开始往前贴靠，一直找到父盒子；
     3.如果贴靠了前面所有浮动元素之后都不能显示, 最终会贴靠到父元素的左边或者右边(就是换行)
复制代码

2.5 清除浮动

我们什么时候用清除浮动？
- 当父级没高度，子盒子浮动，影响到了下面布局，我们就应该清除浮动了。
- 清除浮动主要是为了解决父级元素因为子级浮动引起的内部高度为0的问题。

2.5-1 额外标签法：给谁清除浮动，就在其后额外添加一个空白标签。

  .son {
        width: 100px;
        height: 100px;
        background-color: blue;
        float: left;
        margin-right: 30px;
      }
      .box {
        width: 700px;
        height: 180px;
        background-color: pink;
      }
      .clear {
        clear: both;
      }
    </style>
  </head>
  <body>
    <div class="father">
      <div class="son"></div>
      <div class="son"></div>
      <div class="son"></div>
      <div class="son"></div>
      <div class="box clear"></div>
    </div>
  </body>

/*
清除浮动之后，父元素会自动检测孩子的高度，以最高的那个为准；
当我们给某个元素添加 clear 属性之后, 那么这个元素的 margin 属性就会失效；
*/
复制代码

2.5-2父级添加overflow属性方法触发BFC

给父级添加：overflow为 hidden | auto | scroll 都可以实现。
缺点：内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。
复制代码

2.5-3使用after伪元素清除浮动

伪元素选择器作用就是给指定标签的内容前面添加一个子元素或者给指定标签的内容后面添加一个子元素
.clearfix:after {
	content: "";
	visibility: hidden;/*不用也行*/
	display: block;
	clear: both;
	height: 0;/*不用也行*/
}
.clearfix {
	*zoom: 1; /* IE6、7 专有 */
}
给需要清除浮动影响的父元素加类名就可以了
复制代码

2.5-4使用双伪元素清除浮动

.clearfix:before,
.clearfix:after {
	content: "";
	display: table;
}
.clearfix:after {
	clear: both;
}
.clearfix {
	*zoom: 1; /* 由于IE6-7不支持:after，使用zoom: 1触发hasLayout */
}
复制代码

文章版权归作者所有，未经允许请勿转载。

THE END

前端