web前端的恐怖之旅（7）：浮动

一，浮动元素和浮动元素特性

---

1. 浮动：以让元素脱离文档流，遇到父级边界或者相邻的浮动元素，停下来

   ​ 文档流：元素，没有改变特性时，按照原本块级行内的的位置和规则排列

   使用：folat:left/right;

   给浮动以后===> 灰色钻到绿色下面了

2. 限制：

   1. 父级宽度不够，浮动元素掉下来（外面的盒子要设置宽度）
   2. 浮动元素会被卡主

3. 对文字的影响：文字会环绕元素

4. 浮动元素特性：不管是块级，行内元素变成浮动都具有浮动的特性

   1. 浮动元素 不占文档流位置
   2. 能和 浮动元素横排显示
   3. 支持 宽 高
   4. 支持margin和padding，但是不支持margin auto（左右居中）

   和行内块的区别：

   1. 不会解释空格
   2. 不会存在垂直对齐问题
   3. 脱离文档流

二，清除浮动(由于是浮动，脱离文档流，父级不能包裹浮动元素）

---

清除浮动对父级造成的高度塌陷的问题，把父级的高度还回来（由于div里面的内容是漂浮起来的，会造成div包裹不到浮动的内容），这个时候我们就需要有一个东西垫在浮动的下面，让他真正的占据位置

清除浮动的原则：

1，浮动元素本身不能清除浮动（比如div设置了float，不能直接给clear来清除浮动）
2，哪里有浮动，哪里给父级清楚浮动

清除浮动对父级造成的高度塌陷的问题，把父级的高度还回来

1. 给父级设置固定高度（不灵活）

2. 给父级来一个overflow:hidden（这个属性会探测有没有溢出的元素，能检测到浮动的元素）

3. 给父级的内容最后添加一个空的块级标签，但是会造成代码的冗余增加了无用的标签，比如ol lo ul li之间不适用（不用）

   p{
       float:left;
       width:30px;
       height:30px;
   }
   h1{
       clear:both;
   }
   ...
   <div>
   	<p></p>
   	<p></p>
   	<p></p>
   	<h1></h1>
   </div>
   

4. 给父级换上inline-block（不使用）

5. 如果父级是浮动元素的话，高度不会塌陷，但是要给父级的父级清除浮动

6. 伪元素：（时下主流）通过css创建的一个没有名字的行内元素

   ​ :before 在元素的内容之前添加一个没有名字的行内元素

   div:before{
   content:'我是before'
   }
   

   ​ :after 在元素的内容之后添加一个没有名字的行内元素

   div:after{
   content:'我是after'
   }
   

   ​ 可以用来做一些小东西

   intro{
       width:200px;
       height:200px;
   }
   .clearfix:after{
   	display:block;
   	content:"";
   	clear:both;        /*能让元素沉到最下面*/
   }
   ...
   <div class="intro clear">
   	...
   </div>
   

三，怪异盒模型

---

• 标准盒模型里，width height是内容区域的宽高，整个盒子实际大小是内容区域+padding+border
  • box-sizing:content-box
• 怪异盒模型里，width height是整个盒子的宽高，内容区域实际上是width height-padding-border
  • box-sizing:border-box

四，min-didth，max-width

---

1. min-width:; 最小宽度，屏幕缩小到设置的宽度时，使用min-width

2. max-width:; 最大宽度，当屏幕大于设置的宽度时，使用max-width

   网页内，外面最大的盒子，没有固定宽度，不然不同屏幕大小的电脑，不适应