DIV+CSS 清除浮动
来源:互联网 发布:乐视视频mac客户端 编辑:程序博客网 时间:2024/05/29 03:24
DIV+CSS 浮动效果是指,父元素在未定义高的情况下,由于子元素全部浮动脱离文本流,而造成父元素高的塌陷(PS:正常情况下,父元素的高是由子元素撑起来);或者因为部分子元素的而浮动,脱离文本流而造成其他元素的布局错乱的情况。
1、给未加浮动的子元素的CSS添加 clear: both;若子元素都有浮动时,可以新增加一个空的子元素,并且给其的CSS添加 clear: both;这样可以利用清除左右浮动的子元素重新撑起父元素的高,从而达到清除浮动的效果
<style type="text/css">
.fl{float:left;}
.demo{background:#ccc;}
.item1{background:#F571E3;height:100px;width:100px;}
.item2{background:#21B2F7;height:200px;width:100px;clear: both;}
</style>
</head>
<body>
<h2>用 clearfix 清除浮动</h2>
<div class="demo">
<div class="fl item1"></div>
<div class="item2"></div>
</div>
</body>
2、子元素全部浮动时,给父元素的CSS添加 overflow: hidden;
<style type="text/css">
.fl{float:left;}
.demo{background:#ccc;overflow: hidden;}
.item1{background:#F571E3;height:100px;width:100px;}
.item2{background:#21B2F7;height:200px;width:100px;}
</style>
</head>
<body>
<div class="demo">
<div class="fl item1"></div>
<div class="fl item2"></div>
</div>
</body>
3. 给父元素加 伪类:after 和 zoom
<style type="text/css">
.fl{float:left;}
.demo{background:#ccc;zoom: 1;}
.demo:after{display:block;clear:both;content:"";visibility:hidden;height:0}
.item1{background:#F571E3;height:100px;width:100px;}
.item2{background:#21B2F7;height:200px;width:100px;}
</style>
</head>
<body>
<div class="demo">
<div class="fl item1"></div>
<div class="fl item2"></div>
</div>
</body>
- div+css清除浮动
- DIV+CSS 清除浮动
- [DIV/CSS] CSS-清除浮动
- DIV+CSS基础教程:清除浮动
- div+css布局,清除浮动
- div+css之清除浮动
- div+css之清除浮动
- DIV+CSS clear both清除产生浮动
- html div css——清除浮动
- DIV+CSS clear both清除产生浮动
- CSS-浮动&清除浮动
- div清除浮动
- [HTML]DIV+CSS clear both清除产生浮动
- DIV 清除浮动--CSS 伪元素-- 阴影---鼠标事件
- CSS浮动和清除浮动
- css浮动与清除浮动
- css清除浮动/闭合浮动
- css闭合浮动、清除浮动
- 数字在排序数组中出现的次数
- 深入Java集合学习系列:HashMap的实现原理
- CSS——display显示属性
- scanf族函数高级用法
- “耳根”发布新作《一念永恒》,交易记录
- DIV+CSS 清除浮动
- 铁打的营盘流水的兵
- 多列布局之定宽+自适应
- Android studio 导入源码
- c++11 中成员变量初始化的顺序
- 值类型与引用类型
- Linux gpio 按键中断学习
- java基础知识点
- 图片的底片效果、老照片效果、浮雕效果、黑白色效果