让内层浮动的Div将外层Div撑开 -----清浮动
清浮动的好处写多了都能体会到,解决高度塌陷, 一般情况下是要清除浮动的,不然会影响下面标签的排版。
<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; }
让内层浮动的Div将外层Div撑开 -----清浮动的更多相关文章
- 让内层Div将外层Div撑开
在CSS排版中,如果一个层中的层使用了float浮动的话,那么就有可能会出现外层没有被内层撑开的情况,如以下代码所示: <div style="width:300px; "& ...
- 【div+css】两个div,如何让内层的div在外层div中水平垂直居中
好久没有写样式,很是很生疏 ==================================================================== 方法1: .parent { wi ...
- CSS浮动与清浮动
浮动 ( float css属性) float : left right Elements are floated horizontally, this means that an element c ...
- 关于浮动与清浮动 float
浮动常见的几种属性值 float {left; right; none; } 主要是定义元素朝哪个方向浮动: 元素浮动后的特性 在一行显示,父级的宽度放不下,自己折行: 支持宽高等样式: 不设置 ...
- web开发:清浮动
一.display总结 二.overflow 三.浮动布局 四.清浮动 五.清浮动的方式 一.display总结 <!DOCTYPE html> <html> <head ...
- [CSS][转载]内层div的margin-top影响外层div
参考 内层div的margin-top影响外层div——引出外边距合并 div嵌套导致子区域margin-top失效不起作用的解决方法 我使用的是在外层的div中添加 border: 1px soli ...
- 内层div的margin-top影响外层div——引出外边距合并Collapsing margins
内层div的margin-top影响外层div——引出外边距合并Collapsing margins 作者:zccst 今天才算是了解边距合并.正如一位前辈所言,每一个CSS的坑,都让你学到不少知识. ...
- IE浏览器中overflow:hidden无效,内层元素超出外层div的解决方法
原文地址:http://www.xin126.cn/show.asp?id=2624 在用css布局的时候,用IE浏览器(ie6.ie7.ie8)预览,有时候会出现内层元素(内部DIV.图片等)超出外 ...
- 关于ie6中绝对定位或浮动的div中既有向左float也有向右float时候如何让外层div自适应宽度的解决方案--
一个详细的说明请见: http://www.cnblogs.com/yiyang/p/3265006.html 我的问题大约为,如下代码: <!DOCTYPE html PUBLIC " ...
随机推荐
- svn和GitHub的使用
GitHub的工作流程和命令介绍:http://www.runoob.com/w3cnote/git-guide.html svn的基本使用用法:http://www.cnblogs.com/xile ...
- c语言学习笔记第二章———入门
B站有视频演示 2.1软件安装 推荐软件 1.dev-c++ 下载链接:(腾讯软件管家的下载地址) https://sm.myapp.com/original/Development/Dev-Cpp_ ...
- css3实现炫酷的文字效果_空心/立体/发光/彩色/浮雕/纹理等文字特效
这篇文章主要整理一些css3实现的一些文字特效,分享给大家, 相信您看完会有不少的收货哦! 一.css3 空心文字 <style> .hollow{ -webkit-text-stroke ...
- P1330 封锁阳光大学——深度优先搜索DFS
P1330 封锁阳光大学 题目描述 曹是一只爱刷街的老曹,暑假期间,他每天都欢快地在阳光大学的校园里刷街.河蟹看到欢快的曹,感到不爽.河蟹决定封锁阳光大学,不让曹刷街. 阳光大学的校园是一张由 \(n ...
- input函数报错"*** is not defined"
#键盘输入输出name = input('input your name: ') print("姓名:"+name) 运行结果: 只需要在输入时加引号,如"yu" ...
- day73 bbs项目☞基本功能实现
目录 一.登录功能 二.首页搭建 三.admin后台管理 四.图片防盗链 五.个人站点展示 一.登录功能 views.py 0难度,都是基本操作,要熟悉auth模块的使用 # 登录功能 def log ...
- 为什么通常在发送数据埋点请求的时候使用的是 1x1 像素的透明 gif 图片?
避免跨域(img 天然支持跨域) 利用空白gif或1x1 px的img是互联网广告或网站监测方面常用的手段,简单.安全.相比PNG/JPG体积小,1px 透明图,对网页内容的影响几乎没有影响,这种请求 ...
- 题解:2018级算法第三次上机 C3-Zexal的浩瀚星辰
题目描述: 样例: 实现解释: 一道结合了火箭发射的贪心题目 知识点: 贪心,优先队列 题目分析: 根据题目描述可知,延迟后时间是正常推进的,也就是假设共有n个火箭,推迟k小时.则在到达k+1小时时, ...
- 武汉百得思维Java面试总结
武汉百得思维Java面试总结 在一个愉快的下午,我们并不十分愉快地参加了宣讲会.那是国庆的前两天,大家正在为放假的愉悦所兴奋也在为找工作而紧张. 在听过一阵胡吹乱侃之后,大家都昏昏欲睡,于是终于迎来了 ...
- 使用wsl2時碰到的問題
1.啓動wsl系统时出现“参考的对象类型不支持尝试的操作”. 解决方法: netsh winsock reset