浮动:让默认(标准)文档流下的元素漂浮起来水平排列

Posted tangdiying

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了浮动:让默认(标准)文档流下的元素漂浮起来水平排列相关的知识,希望对你有一定的参考价值。

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;相对于浏览器窗口的左上角;





































以上是关于浮动:让默认(标准)文档流下的元素漂浮起来水平排列的主要内容,如果未能解决你的问题,请参考以下文章

清除浮动

CSS-浮动

float-clear

文档流浮动 定位的概念

前端基础

网页的布局方式