浮动：让默认（标准）文档流下的元素漂浮起来水平排列

Posted 2021-01-26 tangdiying

float--left左浮动；
right右浮动；
none不浮动；
浮动排列的顺序不会改变，默认时谁在第一个，浮动就会排在第一个；

浮动的影响：
1、行内元素浮动之后可以支持宽高；
2、文本会给浮动的元素让位；可以制作文本绕排的效果；
3、在父级没有给高度的情况下，子级浮动后父级会没有高度；

清除浮动：
1、在父级内容的最后添加一个空的div，添加clear属性；
clear--left清除左浮动；
right清除右浮动；
both清除所有（左/右）浮动；
clear是清除上一个元素带来的影响；
不推荐使用，因为会在页面上添加太多的无用标签，让页面的布局变得更复杂；

2、给父级设置overflow：hidden；
会触发bfc（block formatting context）块级格式化上下文；
不推荐使用，因为这个属性和定位一起使用时会产生问题；

3、使用伪元素after
.clearfix:after {
content:"";/*内容为空*/
height:0;/*高度为0*/
line-height:0;/*行高为0*/
display:block;/*块级元素*/
visibility:hide;/*隐藏*/
clear:both;/*清除浮动*/
}
.clearfix {
zoom:1;/*IE678*/
}

4、使用双伪元素after和before
.clearfix:afer,.clearfix:before {
content:"";
display:table;
clear:both;
}
.clearfix {
zoom:1;
}
以上四种方式推荐使用第三种；

列表样式：list-style

定位：
1、静态定位--static；按照标准文档流进行布局；

2、相对定位--relative；相对自身；以自身的坐上角（坐标点）为参考；会保留原来的位置不被其他元素侵占；

3、绝对定位--absolute；参考的是页面的左上角；绝对定位位置不会被保留；
如果父级有定位，则参考父级的坐标点；如果父级没有定位，则会一级一级向上查找，直到html标签，中途有定位就会参照这个定位元素的坐标点；

4、固定定位--fixed；相对于浏览器窗口的左上角；