css 浮动、定位、BFC

小灰

嗯哼，你好哇~

1.浮动

浮动元素的特征：

浮动元素的框可以向左或者向右移动，直到它的外边缘碰到父元素包含框或者另一个浮动元素的边框为止；
浮动元素不在文档普通流之中，因此文档普通流中的块级元素感知不到浮动元素的存在。

浮动对其他元素的影响

a.对父容器的影响：造成父元素的塌陷

浮动元素脱离文档流向左或者向右移动，直到边框碰到父元素的边缘，它无法撑开其父元素.

b.对其他浮动元素的影响：

浮动元素都向某个方向移动，直到其边框碰到其他元素的边框，如果包含框太窄，无法容纳多个浮动元素，那么其浮动元素向下移动，直到拥有足够的空间，如果浮动元素的高度不同，那么它们向下移动时可能被其他浮动元素卡住。

c.对普通元素的影响：

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

d.对文字的影响：

浮动元素旁边的文字框被缩短，从而给浮动元素留出空间，文字框围绕浮动元素。

e.对子元素的影响：

当一个元素浮动时，在没有清除浮动的情况下，它无法撑开其父元素，但它可以让自己的浮动子元素撑开它自身，并且在没有定义具体宽度情况下，使自身的宽度从100%变为自适应（浮动元素display:block)

清除浮动：

清除浮动指的是运用clear属性去解决浮动父容器高度塌陷的问题，clear属性规定元素的哪一侧不允许其他浮动元素。
···
<style>
body{
border: 1px solid brown;
}
.container{
border: 1px solid grey;
margin: 50px 30px;
width: 1000px;
background-color: pink;
}
.box1{
float: left;
width: 200px;
height: 30px;
background-color: #f00;
}
.box2{
float: left;
width: 200px;
height: 40px;
background-color: #0f0;
}
.box3{
float: left;
width: 200px;
height: 50px;
background-color: #00f;
}
</style>
</head>
<body>
<div class="container">
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
<div class="clear">1</div>
</div>
</body>
</html>
···

9.png

方法一：添加新的元素、应用 clear：both；

清除浮动方法2：BFC（Block Format Content）清理浮动，BFC可以阻止垂直外边距折叠、不会重叠浮动元素、可以包含浮动。因此清理浮动在BFC的语境下就是“包含浮动”，也即让父容器形成BFC就可以。

.clear{
            clear: both;
    </style>

10.png

方法二：使用伪元素::after（推荐使用）

.container ::after{
            content:"";
            display: block;
            clear: both;
        }

11.png

方法三：形成BFC块级排版上下文；

用于对块级元素排版，默认情况下只有根元素（body)一个块级上下文，但是如果一个块级元素设置了float:left，overflow:hidden或position:absolute样式，就会为这个块级元素生成一个独立的块圾上下文。就像在window全局作用域内，声明了一个function就会生成一个独立的作用域一样，新开僻的BFC像是开僻了一个新的小宇宙，使这个块圾元素内部的排版完全独立隔绝。
2.独立的块级上下文可以包裹浮动流，全部浮动子元素也不会引起容器高度塌陷，也就是说包含块会把浮动元素的高度也计算在内，顺便达到了清除浮动的目的。
···
.container{
overflow: hidden;
}
···

12.png

注意：BFC可以包含浮动，但是使用BFC清除浮动可能有副作用，比如使用float的时候会使父容器长度缩短，而且还有个重要缺陷——父容器float解决了其塌陷问题，那么父容器的父容器怎么办？overflow属性会影响滚动条和绝对定位的元素；position会改变元素的定位方式。所有如果使用BFC清除浮动，还要考虑修复其可能产生的副作用。

2.BFC

BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与，它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。

哪些元素会生成BFC?

1、根元素
2、float属性不为none
3、position为absolute或fixed
4、display为inline-block, table-cell, table-caption, flex, inline-flex
5、overflow不为visible

BFC的特性

内部的Box会在垂直方向，一个接一个地放置。
Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠每个元素-
的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即--- 使存在浮动也是如此。
BFC的区域不会与float box重叠。
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
计算BFC的高度时，浮动元素也参与计算。

BFC的作用：

1.外边距合并

外边距合并指的是，两个在普通文档流中的“相邻”元素外边距相遇的时候发生合并的情况。这个所谓的“相邻”可以是父子关系相邻，兄弟关系相邻，甚至如果一个元素内部没有东西，自身的上下边距相遇时都会发生外边距合并。

合并的结果为：当两个外边距都是正数时，取两者之中的较大者；当两个外边距都是负数时，取两者之间绝对值较大者；当两个外边距一正一负时，取的是两者的和。

外边距合并的具体情况:

a.父子关系的合并

假如说，父元素和子元素在正常的文档流当中。而且父元素没有边框或者padding，那么父子之间就会发生外边距合并。
（简单的解决方法：

1.给父元素加边框；
给父元素加了边框之后，它们的margin就被边界线隔离开来，就不会发生外边距合并。它们就会各归各位，父元素有父元素的外边距，子元素有子元素的外边距
2.设置父元素的padding
给父元素设置了padding之后，也能够阻止父子的外边距相融合，所以也可以防止父子元素的外边距合并。）

b.兄弟关系的合并:

如果两个兄弟元素在正常的文档流当中，会产生外边距合并。
（简单的解决方案：只设置一个外边距）

c.自身的合并

一个元素如果里面没有东西，也没有边框和padding，那么它自身的外边距就会融合，也会发生外边距合并
(简单的解决方案：
1.给自身加边框；2.给自身加padding)

阻止相邻元素外边距合并：

另外的方法创建BFC:
1.设置float属性不为none；
2.设置position为absolute或fixed；
3.设置display为inline-block, flex, 或者inline-flex
4.设置：overflow不为visible
但是设置这些属性，要了解它们的副作用并修复

<html>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
  <div id="header">
    <div>  <h1>hello world</h1></div>
   <div class="detail">
  <div class="footer1">
<!--     footer1 -->
    <div class="footer2">
    footer2
</body>
</html>
#header{
  background-color: red;
  margin-bottom:40px ;
/*   border:1px solid #333 */
    /* padding: 1px; */
 overflow: hidden;
  /* float: left;
  width: 100%; */
  /* display: inline-block;
  width: 100%; */
 /*  position: absolute; */
#header h1{
  margin-top: 50px;
.detail{
  /* float: left;
  clear: both; */
  overflow: hidden;
  margin-top: 30px;
  margin-left: 30px;
  background-color: #00f;
.footer1{
  background-color: #0f0;
  margin: 30px;
.footer2{
  background-color: yellow;

14.png

2.包含浮动：计算BFC的高度时，浮动元素也参与计算

</head>
<header>
  <h1>hello world</h1>
      <li><a href="">1</a></li>
      <li><a href="">2</a></li>
      <li><a href="">3</a></li>
</header>
</body>
body{
  background-color: grey;
  margin: 0;
header{
    background-color: red;
    overflow:hidden;
  list-style: none;
  background-color: pink;
  float: left;