码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2018-12-10 20:48:50      阅读:300      评论:0      收藏:0      [点我收藏+]

标签:tin   位置   宽高   isp   一个   fixed   content   float   ble   

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

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

标签:tin   位置   宽高   isp   一个   fixed   content   float   ble   

原文地址:https://www.cnblogs.com/tangdiying/p/10098564.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!