浮动 和 定位

Posted 2020-12-02 evenyao

浮动

浮动元素特征

元素脱离正常的文档流，其他非浮动元素感知不到它的存在。但是浮动元素可以感知已经存在于文本框中的浮动元素和非浮动块级元素。可以移动到所在容器的的左端或者右端。其他的文本和行内元素围绕它安放。

特征：不管一个元素是行内元素还是块级元素。
块级元素设置浮动之后，宽度就会收缩成本身内容的宽度，呈现和inline-block类似的感觉
行内元素设置浮动之后，呈现块级元素的特性，可以设置宽、高、margin
代码

影响

• 对父容器的影响： 不与父容器发生外边距合并。无法撑开父元素。

• 对其他浮动元素的影响：父容器足够宽，与其他浮动元素同一水平方向依次排列。父容器宽度在同一水平方向上不能同时容纳全部浮动元素时，超出父容器宽度的浮动元素向下移动，直到有足够的空间,如果水平排列三个以上高度不同浮动元素，那么向下移动的时候可能被卡住。

• 对普通元素的影响：浮动元素之前的普通元素不受影响。浮动元素之后的普通元素因感知不到浮动元素的存在会被浮动元素覆盖。

• 对文字的影响：文字所在行框因为浮动元素的挤压而缩短，实现了文字环绕浮动元素的效果。
  
  

浮动的使用场景

*关于布局：详见<CSS布局>https://www.cnblogs.com/evenyao/p/9276933.html

两栏布局

左侧固定宽度，右侧自适应
右侧固定宽度，左侧自适应

三栏布局

简单的三栏布局

注意 menu、aside、main 的顺序！

导航条

左浮导航条
右浮动导航条 DOM顺序不变

浮动的副作用

• 问题1：对后续元素位置产生影响
• 问题2： 父容器高度计算出现问题
  
  

解决方法：清除浮动

• 解决
• 解决

关于清除浮动

问题:box2设置clear:right有效吗?
因此我们得出了左右是根据自身来决定的

clear: left ;
如果前面有左浮动元素，就必须位于他的下方，
即被清除了浮动元素的top边，依靠浮动元素的bottom边

clear: right ;
如果前面有右浮动元素，就必须位于他的下方，
即被清除了浮动元素的top边，依靠浮动元素的bottom边

clear: both ;
清除左右浮动

清除浮动代码块

这段代码的含义是使用伪元素选择器在clearfix后面添加一个内容为空的元素，并且让他显示为block，然后起到专门用来清除浮动的作用。父元素看不见浮动的字元素，但却可以看到这个元素。

.clearfix::after {
    content: ‘‘;
    clear: both;
    display: block;
}

取名为.clearfix::after，以后再需要使用清除浮动的地方的标签class后加一个clearfix类名，然后在<style>中引用这段代码即可

若以上jsbin代码链接失效，可以查看github上传的一个demo说明：
地址：https://evenyao.github.io/float-demo/

 

定位

几种定位方式

• 静态定位：默认布局方式，position: static;
• 相对定位：相对默认的布局位置进行定位，position: relative;
• 绝对定位：绝对定位元素脱离正常文档流，position: absolute;
• 固定定位：相对浏览器窗口进行定位，position: fixed;
• 粘性定位：默认情况下表现为相对定位，当浏览器窗口顶端的元素距离等于top属性的时候，转变为固定定位，positon: sticky;
  
  

对于相对定位于绝对定位的关系的理解

父元素使用相对定位position: relative;，子元素使用绝对定位position: absolute;。通过父元素的位置，定位子元素的位置，使用场景就像导航栏的主菜单和弹出二级菜单的效果关系一样。
Demo

z-index

z-index 有什么作用？
z-index设置元素堆叠顺序，拥有更高堆叠顺序的元素总是会处于堆叠顺序低的元素前面。

使用的方法：

img {
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: 1;
}