Html-Css-div标签嵌套浮动div标签时无法撑开外部div的解决
2023-09-27 14:20:52 时间
当DIV1里面嵌套有一个DIV2,当DIV2设置了浮动,那么DIV1是无法被撑开的
当DIV1里面嵌套有一个DIV2,当DIV2设置了浮动,那么DIV1是无法被撑开的,也就是说DIV2在这里相当于浮在了页面上方,跟DIV1不在同一个层面,导致了DIV2无法把DIV1给撑开,这是一个老生常谈的问题,也是困扰很多刚接触DIV+CSS的朋友的一个问题。
先来看看这个问题的实际效果
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title> New Document </title> <meta name="Generator" content="EditPlus"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> </head> <body> <div style="background-color:red;width:100px;">div 1 <div style="background-color:green;float:left;height:300px;width:40px;">div float</div> </div> </body> </html>
看图
这里本来DIV1是套在了DIV2的外面的,如果是使用表格做的话,那么DIV1肯定被撑开了,效果应该是如下所示
那如何解决这个浮动了之后无法把容器撑开的局面呢?解决的方法这里介绍2仲。
第一种:在浮动结束的容器后面加上这段代码
<div style=”clear:both;”></div>
意思是清除浮动。
第二种:在外层DIV,也就是这里的DIV1的CSS里面加入以下CSS代码
overflow: auto;
这2种方法都可以实现DIV2把DIV1撑开。不过这里建议大家使用第一种方法,要养成一个习惯,在浮动应用完后消除浮动,这样后面的DIV就不会继承这个浮动(就像在编程的时候,在打开数据库,操作完后,要养成个习惯在后面把数据库关闭)。也就是说浮动这个东西会被继承,除非消除这个浮动,才不会让后面接着的DIV受到继承。其实不仅是DIV,其他的像P等其他的容器都会有继承的效应,大家要养成一个习惯记得要消除浮动。
完整案例
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title> New Document </title> <meta name="Generator" content="EditPlus"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> </head> <body> <div style="background-color:red;width:100px;overflow:auto;">div 1 <div style="background-color:green;float:left;height:300px;width:40px;">div float</div> </div> </body> </html>
相关文章
- C# HTML解析工具HtmlAgilityPack使用实例(一)
- Eclipse.自动提示--编写HTML/CSS/JS/JSP代码时自动提示的解决办法
- Where should I put <script> tags in HTML markup?
- HTML文本框样式大全!(很实用,转载!)
- Flutter移动电商实战 --(47)详细页_Flutter_html插件的使用
- 前端基础 -JQuery之val,text,html
- [转]CSS如何设置html table表格边框样式
- 实现html和word的相互转换(带图片)
- java去除html代码中含有的html、js、css标签,获取文字内容
- Html - Iframe
- 【前端学习之HTML&CSS进阶篇】-- CSS第一篇 -- @规则与web字体图标
- 【前端学习之HTML&CSS】-- 视觉格式化模型之二 浮动 -- 练习
- 【Python】AttributeError: 'PytestPluginManager' object has no attribute 'addhooks' / pytest-html
- HTML+CSS-如何定义让两个div横向排列
- 11.20 HTML及CSS
- 《网页设计与前端开发 Dreamweaver+Flash+Photoshop+HTML+CSS+JavaScript 从入门到精通》——1.3 网页设计的原则
- html+css+js实现科学计算器
- 未选中的 HTML 复选框
- html-时间datetime-获取焦点autofocus-提示required-验证labels-默认值control-可编辑下拉-正则
- HTML-001-日期组件 layDate 演示
- WEB前端大作业-儿童礼物礼品商城响应式网页模板(HTML JS CSS)
- WEB前端大作业-简约风格装潢公司设计响应式网页模板(HTML JS CSS))
- js正则匹配html标签中的style样式和img标签
- 两行css代码实现瀑布流:html,css最简单的瀑布流实现方式
- HTML+CSS实现(排行榜+棋盘+表格+图片商品列表)
- jsfiddle在线測试Html、CSS、JavaScript——http://jsfiddle.net/
- html li标签前面添加图标三种方法
- html-oncontextmenu 事件
- @Html.Partial,@Html.Action,@Html.RenderPartial,@Html.RenderAction区别
- html/css 图片展示效果