关于浮动与清除浮动
来源:互联网 发布:手机电话变音软件 编辑:程序博客网 时间:2024/06/15 16:37
父亲:粉色div盒子
儿子1:紫色box1
儿子2:橙色box2
1.不浮动
html:
<div class="box"> <div class="box1">BOX1</div> <div class="box2">BOX2</div></div>
css:
<style> .box { /*父亲*/ width: 600px; background-color: pink; } .box1 { /*儿子1*/ width: 200px; height: 200px; background-color: #c8addd; } .box2 { /*儿子2*/ width: 200px; height: 200px; background-color: #ee9d7e; }</style>
2.浮动
儿子1左浮动,儿子2右浮动。会发现粉色的父亲没有了。是因为父亲没有高,浮动的儿子是不能撑开没有高度的父亲,导致粉色的父亲消失。怎么解决呢?所以我们要清除浮动。
3.清除浮动
给父亲清除浮动后粉色父亲就被撑出高度就显示了。并且父亲的兄弟也不会受到浮动的影响。
overflow:hidden;/*本意是溢出隐藏,即清除溢出到盒子外面的文字*/
使用overflow:hidden;清除浮动注意:
1.父亲有宽度,没有高度。
2.给父亲添加overflow:hidden;
3.IE6不支持overflow:hidden;清除浮动,所以如果要兼容IE6使用这个清除浮动时一起写: _zoom:1;
overflow:hidden;_zoom: 1;
0 0
- 关于浮动与清除浮动
- [css]关于浮动与清除浮动
- 浮动与清除浮动
- 浮动与清除浮动
- 浮动与清除浮动
- 浮动与浮动清除
- 关于float与清除浮动
- 关于浮动闭合(清除浮动)
- HTML-浮动与清除浮动
- css浮动与清除浮动
- 元素浮动与浮动清除
- CSS3浮动与清除浮动
- 关于浮动居中与清除浮动的问题
- 关于浮动与清除浮动 (附清除浮动的八种方式)
- 关于清除浮动
- 关于清除浮动
- 关于css清除浮动
- 关于清除浮动
- Java初学者必须知道的11条基础知识
- 时间和时间戳
- Android TextView的垂直滚动效果
- 反转与意料之外
- 日志分析 mapreduce sogou
- 关于浮动与清除浮动
- apche codeigniter http自动跳转https
- spring配置事物的五种方式
- windows的磁盘操作之五——获取物理磁盘上的所有逻辑分区号
- 从零开始学jBPM6(六)- 使用mysql替换H2
- 国内外从事CV相关的企业
- HashMap存储原理以及与hashcode、equals方法的关系
- java 用于计算时间的工具类
- rtk打点,导入arcgis并进行格式变换