【HTML】- CSS清除浮动
2017-06-25 17:07
441 查看
我们通常使用浮动来实现某些元素的布局,但是往往这些元素浮动会影响其他元素的布局,因此会产生副作用。
当元素设置浮动属性后,会对相邻的元素产生影响,相邻的元素特指紧邻其后面的元素。
实例:
3.消除浮动的方法
清除浮动的效果
当元素设置浮动属性后,会对相邻的元素产生影响,相邻的元素特指紧邻其后面的元素。
1.浮动产生的原因:
一般是一个盒子里使用了CSS float浮动属性,导致父级对象盒子不能被撑开,这样CSS float浮动就产生了。实例:
<div class="box"> <div class="left"></div> <div class="right"></div> </div>
<div>浮动元素后的元素</div>
<style> .box{ border: 1px solid red; } .left{ float: left; width: 100px; height:300px; border: 1px solid dodgerblue; margin: 5px; } .right{ float: right; width: 100px; height:300px; margin: 5px; border: 1px solid forestgreen; } </style> 效果:原理上里面的两个对象盒子是在红色对象盒子中的,因为里面的两个盒子使用了float浮动布局,导致外面的红字盒子对象不能被撑开。
2.浮动产生的副作用
2.1 背景不能显示 由于浮动产生,如果对父级设置了(CSS background背景)CSS背景颜色或CSS背景图片,而父级不能被撑开,所以导致CSS背景不能 显示。 2.2 边框不能撑开 如上图中,如果父级设置了CSS边框属性(css border),由于子级里使用了float属性,产生浮动,父级不能被撑开,导致边框不能 随内容而被撑开。 2.3 margin padding设置值不能正确显示 由于浮动导致父级子级之间设置了css padding、css margin属性的值不能正确表达。特别是上下边的padding和margin不能正确显示。 2.4 使浮动元素紧邻其后的元素表现的如同设置了浮动元素一样,不再换行显示,而是显示在同一行中。
3.消除浮动的方法
3.1 设置父级元素一个固定的高度
上面的父级元素样式设置.box{ border: 1px solid red; height: 400px; }
3.2 clear:both清除浮动
在父级“</div>”结束前加此div引入“class="clear"”样式。这样即可清除浮动。.box:after{ content: ''; height: 0px; visibility: hidden; clear: both; display: block; }
3.3 父级元素设置overflow:hidden清除浮动
.box{ border: 1px solid red; overflow: hidden; } 为什么加入overflow:hidden即可清除浮动呢?那是因为overflow:hidden属性相当于是让父级紧贴内容, 这样即可紧贴其对象内内容(包括使用float的div盒子),从而实现了清除浮动。
清除浮动的效果
相关文章推荐
- html+css----清除浮动的方法
- Html+CSS CSS(CSS3) 3种清除浮动的方法
- 【html/css】清除浮动的几种方式
- 23_css清除浮动的三种方法.html
- 第五节 HTML&CSS -- 关于浮动和清除浮动的解说,以及两个大坑不要踩
- HTML入门学习笔记--CSS清除浮动(7)
- html+css-清除浮动
- HTML CSS 清除浮动
- html+css 清除浮动的相关技巧心得
- html、css清除浮动float的三种方法
- HTML/CSS - 清除浮动
- [HTML]DIV+CSS clear both清除产生浮动
- 23_css清除浮动.html
- css父盒子没有高度让子盒子撑开 且子盒子有浮动 清除浮动
- CSS:清除浮动的最优方法
- H5 CSS基础实战二:清除浮动的演练
- CSS实用代码:清除浮动、单行省略号、图片宽高比例、display兼容代码、三角形状
- css清除浮动的处理方法
- 初步了解css中的 浮动和浮动清除的原理
- css如何清除浮动(二)