CSS 浮动和定位（new）

一、CSS浮动

1、网页布局排版

标准流排版

• 块级元素垂直排版；
• 行内和行内块级是水平排版；

浮动流排版

• 是一种 半脱离标准流 的排版方式；
• 浮动流只有水平排版，设置相对于父级元素的左对齐或者右对齐，没有 center，不可以使用 margin：0 auto；
• 浮动流不区分块级和行内元素，更类似于行内块级元素的特点，即可水平排版又可以设置宽高；

定位流排版

2、浮动（float）

浮动元素脱标

• 定义：浮动的元素脱离标准流，像是从标准流里被删除了一样；
• 影响：会造成元素的覆盖问题；

浮动元素排列

• 相同方向，先浮动的在前；
• 不同方向，左浮找左，右浮找右；
• 元素浮动后的位置与浮动前的位置相关：浮动前在第几行浮动后就在第几行，这里的浮动前的位置是在前面的元素都浮动之后的位置；

浮动贴靠和字围现象

• 贴靠：当同一方向上的浮动元素超过父元素的宽度时，浮动元素会自动与上一元素贴靠在同一个元素上
  
• 字围：当存在两个元素，一个元素为浮动元素，而另一个元素为标准元素时，标准元素中的内容会自动围绕在浮动元素四周
  

1.网页排版：垂直方向标准流，水平方向浮动流；

---

二、清除浮动

为什么要清除浮动

• 浮动的元素会脱离标准的文档流，会带来诸如父容器的高度塌陷，元素覆盖等问题

浮动清除说明基于下面的环境

• html

<div id="box1">
    <p>123</p>
    <p>123</p>
    <p>123</p>
</div>
<div id="box2">
    <p>abc</p>
    <p>abc</p>
    <p>abc</p>
</div>

• css

#box1 p{
	background: yellowgreen;
}
#box2 p{
	background: blue;
}
p{
	color:white;
	float: left;
	width: 100px;
}

• 浮动前
  
• 浮动后：第二个容器内的元素也跑到第一行了
  

1、清除方式一

• 标准流中元素可以撑起父元素的高度；
• 浮动流中元素无法撑起父元素的高度；
• 直接给父容器设置合适的高度，这样就不怕子元素浮动后，父元素高度塌陷了
• 浮动清除后的效果如图
  

• 如果设置的高度不合适可能出现下面的情况
  

2、清除方式二

• 直接给后面的盒子设置 clear：both 属性

clear 导致的 margin-top 失效

• margin-top 如果是相对于父元素的，则必须要为父元素设置边框才有效；
• 前一个盒子的元素都浮动之后，前面的元素就可以看作没了，此时设置的 mt 是相对与 body 的，而不是前一个盒子的，而 body 又没有边框，所以 mt 无效；

3、清除方式三：隔墙法

外墙

• 实质就是在两个盒子的中间加一个块级元素，然后给这个块级元素设置 clear both；
• 带来的问题：后面盒子的 mt 可以用，而前面盒子的 mb 不能用；
• 解决：通常 mt 和 mb 都不用，直接给中间的块级元素设置高度；

内墙

• 实质是在前面一个盒子的最后一个子元素的后面（或者后面的盒子的第一子元素之前）添加一个块级元素，然后 clear both；
• 这种方法 mt、mb和给添加的块级设置 height 都是可行的；
• 内墙可以撑起前一个盒子的高度，而外墙不可以；

4、清除方式四

伪元素选择器

• 在指定的元素之前或者之后添加一个元素

div::before/after{
    content:....;
    visibility:hidden;
}

伪元素选择器清除浮动

• 这里的 div 是父容器

div::after{
    content:'';
    display:block;
    height:0px;
    visibility:hidden;
    clear:both;
}

5、清除方式五

• 直接给父级元素设置 overflow：hidden
• 这样设置可以清除浮动的原因是：overflow:hidden属性相当于是让父级紧贴内容，这样即可紧贴其对象内内容（包括使用float的div盒子），从而实现了清除浮动
• overflow：hidden的其他作用
  • 裁剪掉超出标签的内容；
  • 父子元素，子元素设置 mt 无效的问题，可以在父元素设置overflow；

6、总结

• clear（后一个盒子加）、overflow（前一个盒子加）和 伪元素选择器用来清除浮动比较多

---

三、CSS定位（position）

1、相对定位（relative）

定义

• 相对于自己以前在标准流中的位置来移动，不会脱标；
• 结合 top bottom left right 来使用；

注意

• 相对定位水平和垂直的方向上只能选择一个，如：有 left 就没有 right；
• 给相对定位的元素设置margin 和 padding 都是对原来的位置起作用，而不是移动后的位置；
• 相对定位中原来的位置极其重要；

应用

• 位置的微调；
• 结合绝对定位来使用；

2、绝对定位（absolute）

• 绝对定位的参考点默认是body，如果祖先元素中有定位流元素，则以该元素为参考点，如果祖先中存在多个定位流则就近原则，这里的定位流不含 static（默认）；

注意事项

• 绝对定位是脱标的，且不区分行内和块级；
• 结合 top 等来使用；
• body 作为参考点是以当前的显示页面作为参考，而不是以整个页面作为参考；
• 绝对定位会忽略祖先元素的padding；

和相对定位的配合使用

• 单用相对定位的局限：会占用标准流的空间；
• 单用绝对定位的局限：受浏览器宽高的影响；
• 配合使用解决以上的局限：使用方法：子绝父相；

绝对定位的水平居中：

• left：50%；margin-left：-元素宽度的一半；
• 用 margin：0 auto 是无效的；

3、固定定位（fixed）

• 相对浏览器窗口固定，而不是网页；
• 脱标且不区分行内和块级；

4、静态定位（static）

• 元素默认就是静态定位；
• 元素都有一个 z-index属性，默认值为 0；
• z-index 属性是用来控制定位流的覆盖关系的，谁大谁在上面；
• 默认情况，定位流会覆盖标准流；后面的定位流会覆盖前面的定位流；
• 在设置了z-index 属性的条件下，谁大谁在上；
• z-index 的从父现象：
  • 在父元素没有设置 z-index 的前提下，谁的 z-index 大谁在上
  • 在父元素设置了 z-index 的前提下， 父级的 z-index 大，谁就在上

关于四种定位方式：其中相对定位和默认定位都是不脱标的，所以其中的元素是区分行内和块级的，而固定和绝对定位是脱离标准流的，所以也就不区分行内和块级元素

5、text-align & line-height & vertical-align

• text-align：设置水平居中，只对文字图片和 a 标签有效；
• line-height：垂直居中效果只对文字和图片有效（包含标签中的文字和图片）；
• vertical-align：这个属性是设置容器内的内容的垂直排布的，应该给相应的容器设置，而且该容器必须是行内元素，将 display 设置为 table-cell 也是有效的