让内层浮动的Div将外层Div撑开 -----清浮动
2024-09-04 05:09:22
清浮动的好处写多了都能体会到,解决高度塌陷, 一般情况下是要清除浮动的,不然会影响下面标签的排版。
<div class="parent" style="width:300px; background-color:Red;">
测试
<div class="child" style="width:100px; height:100px; background-color:Green; float:left; margin:10px;">
左边
</div>
如图
方法1: 在浮动元素结尾添加一个空的div:
<div style="clear:both"></div>
利弊:方法简单,常用,有违结构与表现分离原则
方法2:爸爸跟着儿子一起浮动:
给父级div添加浮动
.parent{float:left}
利弊:代码简单,排版找虐
方法3:display:table:
Amaze ui 里am-g的用法
.parent{ display:table}
利弊:代码简单,盒模型变成表格,此元素会作为块级表格来显示(类似 <table>),表格前后带有换行符(弊端?)。
方法4:高端借鉴:
方法1跟3的升级版,不破坏结构
.parent:before,.parent:after {
content:"";
display:table;
}
.parent:after { clear:both; }/* For IE 6/7 (trigger hasLayout) */
.parent { zoom:1; }
.parent:after {content:"\200B"; display:block; height:0; clear:both; }
.parent { *zoom:1; }
最新文章
- B/S系统常见缺陷整理和解决方案
- 一些免费的WebService的服务网站
- fir.im Weekly - 如何做一个出色的程序员
- 程序流程的控制之条件分支(Delphi)
- 如何使用Apache的ab工具进行网站性能测试
- jquery简单动画
- TortoiseGit-创建分支、合并分支
- cisco nat
- jQuery:在一个回调中处理多个请求
- Redis在PHP中的基本使用案例
- iOS 此证书的签发者无效
- 【stm32】用TIM1产生6路ADC,用CCR4触发ADC1的注入通道采样
- 权限管理系统之SpringBoot集成LayUI实现后台管理首页
- 命令行运行Android Robotium自动化用例或单元测试用例
- 即时通讯(III)
- IDEA的校园邮箱激活方式
- windows下telnet不是内部或外部命令
- vue系列之项目打包
- System.Collections 学习
- 标 题: JavaScript真的要一统江湖了
热门文章
- python中 _、__、__xx__() 区别及使用场景
- SpringBoot 2.x添加Druid作为数据库连接池
- Java8 集合去重和排序
- 模拟elementUI或使用自定义属性简单封装对话框
- 线性dp打鼹鼠
- Jenkins Pipeline 部署 SpringBoot 应用
- [JAVA]移位运算(左移<;<;,右移>;>;和无符号右移>;>;>;)
- GAN网络从入门教程(三)之DCGAN原理
- 武汉百得思维Java面试总结
- requests接口自动化3-url里带参数的get请求:params