您现在的位置是:网站首页> 编程资料编程资料
DIV设置浮动后无法撑开外部DIV的解决办法_Div+CSS教程_CSS_网页制作_
2023-10-07
340人已围观
简介 当DIV1里面嵌套有一个DIV2,当DIV2设置了浮动,那么DIV1是无法被撑开的
当DIV1里面嵌套有一个DIV2,当DIV2设置了浮动,那么DIV1是无法被撑开的,也就是说DIV2在这里相当于浮在了页面上方,跟DIV1不在同一个层面,导致了DIV2无法把DIV1给撑开,这是一个老生常谈的问题,也是困扰很多刚接触DIV+CSS的朋友的一个问题。
先来看看这个问题的实际效果

这里本来DIV1是套在了DIV2的外面的,如果是使用表格做的话,那么DIV1肯定被撑开了,效果应该是如下所示

那如何解决这个浮动了之后无法把容器撑开的局面呢?解决的方法这里介绍2仲。
第一种:在浮动结束的容器后面加上这段代码
意思是清除浮动。
第二种:在外层DIV,也就是这里的DIV1的CSS里面加入以下CSS代码
overflow: auto;
这2种方法都可以实现DIV2把DIV1撑开。不过这里建议大家使用第一种方法,要养成一个习惯,在浮动应用完后消除浮动,这样后面的DIV就不会继承这个浮动(就像在编程的时候,在打开数据库,操作完后,要养成个习惯在后面把数据库关闭)。也就是说浮动这个东西会被继承,除非消除这个浮动,才不会让后面接着的DIV受到继承。其实不仅是DIV,其他的像P等其他的容器都会有继承的效应,大家要养成一个习惯记得要消除浮动。
相关内容
- 链接伪类(:hover)CSS背景图片有闪动BUG的解决方法_CSS教程_CSS_网页制作_
- 纯css实现的跟随网页浮动的层_CSS布局实例_CSS_网页制作_
- css hack 兼容IE5.0、IE5.5、IE6.0、IE7.0、FF1.5、FF2.0 浏览器兼容教程_浏览器兼容教程_CSS_网页制作_
- DIV半透明代码 兼容主流浏览器_CSS教程_CSS_网页制作_
- CSS first-letter实现首字下沉_CSS教程_CSS_网页制作_
- 网页变灰配合全国哀悼日的css代码 20100421_CSS教程_CSS_网页制作_
- 成语大挑战 黄色钱袋上面画着一只抢和一个军帽 答案是什么成语_手机游戏_游戏攻略_
- 天天酷跑游戏秘籍 超级模式奖励内容和开启方法分享_手机游戏_游戏攻略_
- 实况足球2014实用秘籍 防拉扯抢头球方法分享_手机游戏_游戏攻略_
- 天天酷跑宠物坐骑无限购买方法分享 无危害刷金币方法详解_手机游戏_游戏攻略_
