CSS之浮动布局及相关问题
2024-10-08 10:37:13
CSS之浮动布局及相关问题
1.什么是浮动:
在我们布局的时候用到的一种技术,能够方便我们进行布局,默认流动布局有不足,让块元素可以并排显示,通过让元素浮动,我们可以使元素在水平上左右移动,再通过margin属性调整位置。
2.浮动的原理;
使当前元素脱离普通流,相当于浮动起来一样,浮动的框可以左右移动,直至它的外边缘遇到包含框或者另一个浮动的边缘
3、浮动的生成:
使用css属性 float:left/right/none左浮动/右浮动/不浮动(默认)
4、浮动的影响:
不会影响未浮动的块级元素布局,但会影响内联元素的布局
浮动后的元素可以设置宽度和高度,也就是说内联元素浮动后会变成块级元素,但我更倾向内联元素与变成inline-block元素,即同时拥有块级与行内元素的特征
因为浮动元素脱离了普通流,会出现一种高度坍塌的现象:原来的父容器高度是当前子元素撑开的,但是当子元素浮动后,脱离普通流浮动起来,那父容器的高度就坍塌(前提是父容器高度小于子元素高度)
5、产生高度塌陷的触发条件及解决方法
当父元素未设置高度时,所有子元素浮动后,造成子元素脱离文档流进而无法把父元素撑开,父元素高度为0产生高度塌陷,称为高度塌陷问题
父元素高度塌陷后,父元素以下的元素都会向上移动,导致布局混乱,所以我们要解决高度塌陷的问题。
解决方法一:
解决高度塌陷最直接的办法就是给父元素添加高度
优点:简单。
缺点:只适合固定页面的布局,无法进行自适应,不推荐使用。
二、触发BFC
BFC即 Block Formatting Contexts (块级格式化上下文), 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域,并且有一套渲染规则,它决定了其子元素将如何定位,以及和其他元素的关系和相互作用。
BFC有一个特性是计算BFC的高度时,浮动元素也参与计算,所以将box出发为BFC后可以解决高度塌陷。可以通过给box添加overflow: hidden;等声明触发BFC。
三、给所有的浮动元素后面(即div2后)加一个空的标签。给添加的这个空标签添加声明 clear: both; 。
可以再加上height: 0; overflow: hieedn;是为了避免这个空标签如果是li的话,在IE6和IE7. 上有默认高度撑着,所以要解决一下。)
四、万能清除法:给高度塌陷的元素添加如下after伪类
.box::after{
content: '';
clear: both;/*清除两侧浮动*/
display: block;/*转成成一个块元素*/
both; overflow: hidden;
visibility: hidden;
}
::after对IE8以下有兼容问题,可以通过增加zoom: 1;声明来解决。
CSS清除浮动的8种方法以及优缺点
浮动会使当前标签产生向上浮的效果,同时会影响到前后标签、父级标签的位置及 width height 属性。而且同样的代码,在各种浏览器中显示效果也有可能不相同,
这样让清除浮动更难了。解决浮动引起的问题有多种方法,但有些方法在浏览器兼容性方面还有问题。
下面总结8种清除浮动的方法(测试已通过 ie chrome firefox opera,后面三种方法只做了解就可以了):
1,父级div定义 height
<style type="text/css">
.div1{background:#000080;border:1px solid red;/*解决代码*/height:200px;}
.div2{background:#800080;border:1px solid red;height:100px;margin-top:10px}
.left{float:left;width:20%;height:200px;background:#DDD}
.right{float:right;width:30%;height:80px;background:#DDD}
</style>
<div class="div1">
<div class="left">Left</div>
<div class="right">Right</div>
</div>
<div class="div2">
div2
</div>
原理:父级div手动定义height,就解决了父级div无法自动获取到高度的问题。
优点:简单、代码少、容易掌握
缺点:只适合高度固定的布局,要给出精确的高度,如果高度和父级div不一样时,会产生问题
建议:不推荐使用,只建议高度固定的布局时使用
2,结尾处加空div标签 clear:both;
<style type="text/css">
.div1{background:#000080;border:1px solid red}
.div2{background:#800080;border:1px solid red;height:100px;margin-top:10px}
.left{float:left;width:20%;height:200px;background:#DDD}
.right{float:right;width:30%;height:80px;background:#DDD}
/*清除浮动代码*/
.clearfloat{clear:both;height:0;overflow:hidden;}
</style>
<div class="div1">
<div class="left">Left</div>
<div class="right">Right</div>
<div class="clearfloat"></div>
</div>
<div class="div2">
div2
</div>
原理:添加一个空div,利用css提高的clear:both清除浮动,让父级div能自动获取到高度
优点:简单、代码少、浏览器支持好、不容易出现怪问题
缺点:不少初学者不理解原理;如果页面浮动布局多,就要增加很多空div,让人感觉很不好
建议:不推荐使用,但此方法是以前主要使用的一种清除浮动方法
3,父级div定义 伪对象:after 和 zoom
<style type="text/css">
.div1{background:#000080;border:1px solid red;}
.div2{background:#800080;border:1px solid red;height:100px;margin-top:10px}
.left{float:left;width:20%;height:200px;background:#DDD}
.right{float:right;width:30%;height:80px;background:#DDD}
/*清除浮动代码*/
.clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0;overflow:hidden;}
.clearfloat{zoom:1}
</style>
<div class="div1 clearfloat">
<div class="left">Left</div>
<div class="right">Right</div>
</div>
<div class="div2">
div2
</div>
原理:IE8以上和非IE浏览器才支持:after,原理和方法2有点类似,zoom(IE转有属性)可解决ie6,ie7浮动问题
优点:浏览器支持好、不容易出现怪问题(目前:大型网站都有使用,如:腾迅,网易,新浪等等)
缺点:代码多、不少初学者不理解原理,要两句代码结合使用才能让主流浏览器都支持。
建议:推荐使用,建议定义公共类,以减少CSS代码。
4,父级div定义 overflow:hidden
<style type="text/css">
.div1{background:#000080;border:1px solid red;/*解决代码*/width:98%;overflow:hidden}
.div2{background:#800080;border:1px solid red;height:100px;margin-top:10px;width:98%}
.left{float:left;width:20%;height:200px;background:#DDD}
.right{float:right;width:30%;height:80px;background:#DDD}
</style>
<div class="div1">
<div class="left">Left</div>
<div class="right">Right</div>
</div>
<div class="div2">
div2
</div>
原理:必须定义width或zoom:1,同时不能定义height,使用overflow:hidden时,浏览器会自动检查浮动区域的高度
优点:简单、代码少、浏览器支持好
缺点:不能和position配合使用,因为超出的尺寸的会被隐藏。
建议:只推荐没有使用position或对overflow:hidden理解比较深的朋友使用。
5,父级div定义 overflow:auto
<style type="text/css">
.div1{background:#000080;border:1px solid red;/*解决代码*/width:98%;overflow:auto}
.div2{background:#800080;border:1px solid red;height:100px;margin-top:10px;width:98%}
.left{float:left;width:20%;height:200px;background:#DDD}
.right{float:right;width:30%;height:80px;background:#DDD}
</style>
<div class="div1">
<div class="left">Left</div>
<div class="right">Right</div>
</div>
<div class="div2">
div2
</div>
原理:必须定义width或zoom:1,同时不能定义height,使用overflow:auto时,浏览器会自动检查浮动区域的高度
优点:简单、代码少、浏览器支持好
缺点:内部宽高超过父级div时,会出现滚动条。
建议:不推荐使用,如果你需要出现滚动条或者确保你的代码不会出现滚动条就使用吧。
6,父级div 也一起浮动
<style type="text/css">
.div1{background:#000080;border:1px solid red;/*解决代码*/width:98%;margin-bottom:10px;float:left}
.div2{background:#800080;border:1px solid red;height:100px;width:98%;/*解决代码*/clear:both}
.left{float:left;width:20%;height:200px;background:#DDD}
.right{float:right;width:30%;height:80px;background:#DDD}
</style>
<div class="div1">
<div class="left">Left</div>
<div class="right">Right</div>
</div>
<div class="div2">
div2
</div>
原理:所有代码一起浮动,就变成了一个整体
优点:没有优点
缺点:会产生新的浮动问题。
建议:不推荐使用,只作了解。
7,父级div定义 display:table
<style type="text/css">
.div1{background:#000080;border:1px solid red;/*解决代码*/width:98%;display:table;margin-bottom:10px;}
.div2{background:#800080;border:1px solid red;height:100px;width:98%;}
.left{float:left;width:20%;height:200px;background:#DDD}
.right{float:right;width:30%;height:80px;background:#DDD}
</style>
<div class="div1">
<div class="left">Left</div>
<div class="right">Right</div>
</div>
<div class="div2">
div2
</div>
原理:将div属性变成表格
优点:没有优点
缺点:会产生新的未知问题。
建议:不推荐使用,只作了解。
8,结尾处加 br标签 clear:both
<style type="text/css">
.div1{background:#000080;border:1px solid red;margin-bottom:10px;zoom:1}
.div2{background:#800080;border:1px solid red;height:100px}
.left{float:left;width:20%;height:200px;background:#DDD}
.right{float:right;width:30%;height:80px;background:#DDD}
.clearfloat{clear:both}
</style>
<div class="div1">
<div class="left">Left</div>
<div class="right">Right</div>
<br class="clearfloat" />
</div>
<div class="div2">
div2
</div>
原理:父级div定义zoom:1来解决IE浮动问题,结尾处加 br标签 clear:both
建议:不推荐使用,只作了解。
最新文章
- mysql登陆问题
- [转]图片中的字符分割提取(基于opencv)
- c语言随机函数&;&;时间函数
- checkbox与说明文字无法对齐的问题
- Programming with gtkmm 3
- rpm与yum命令的初步认识
- ubuntu安装体验
- 关于webroot与web-inf
- Linux RAR 安装和使用
- Bootstrap框架的要点--栅格系统
- 基于Spring Cloud和Netflix OSS 构建微服务-Part 1
- Mysql MHA(GTID)配置(实操)
- Luogu_2597_[ZJOI2012]灾难 倍增lca + 构造
- MySQL 5.7 安装指南
- python3列表(list)
- UVA548 tree的思路
- idea android 开发
- uboot2014.10移植(一)
- es6初级之解构----之一
- package.json bin
热门文章
- C++11智能指针(unique_ptr、shared_ptr、weak_ptr)(转)
- itchat 爬了爬自己的微信通讯录
- Invalid Native Object
- 在线教育厮杀惨烈,51Talk一家独大之后,却仍是持续亏损?
- 菜鸟教程 Missing parentheses in call to 'print'
- 洛谷 P3796 【模板】AC自动机(加强版)(AC自动机)
- C语言 删除排序链表中的重复元素
- phpstorm实用技巧
- idea 配置 tomcat 教程
- @Cacheable注解不生效原因