清除浮动的方法
2016-12-27 15:00
225 查看
浮动会使当前元素脱离普通文档流,从而对父级元素和兄弟级元素造成影响,最终影响布局。所以,清除浮动是每个前端必须掌握的知识。下面列举几种清除浮动的方法,如下:
方法1:父级定义高度(height)
html代码:
css代码:
效果图:
原理:父级元素手动设置高度,可以解决子元素浮动后,父级元素无法自动获取高度的问题。
优点:代码少、简单、易掌握。
缺点:只适合高度已知的情况,有局限性。
建议:不建议使用。
方法2:父级元素样式中定义overflow:hidden
html代码:
css代码:
效果图:
原理:使用overflow:hidden时,父级元素不用定义高度,父级元素会自动获取浮动区域高度。
优点:代码少、简单易掌握、支持性好。
缺点:不能和position结合使用,会将超出部分隐藏。
建议:建议使用,但尽量避免和position同时使用。
方法3:父级元素后面加空的兄弟元素,并且其兄弟元素的样式设置:clear:both
html代码:
css代码:
效果图:
原理:添加一个空标签元素,通过clear:both,让父级元素自动获取浮动元素的高度。
优点:代码少、稳定、浏览器支持好、不容易出现问题。
缺点:原理不易被理解,并且如果浮动布局多,会增加很多空标签元素。
建议:不建议使用。
方法4:父级元素定义伪类:after和zoom
html代码:
css代码:
效果图:
原理:通过伪类,让父级元素自动获取浮动元素的高度。
优点:稳定,浏览器支持好。
缺点:代码稍微多点,原理不易掌握。
建议:建议使用,添加公共类,减少css代码。
方法5:父级元素添加overflow:auto
html代码:
css代码:
效果图:
原理:父级不能定义高度,使用overflow:auto,浏览器自动获取浮动区域高度。
优点:简单、代码少、支持好。
缺点:容易出现滚动条。
建议:不建议使用,容易出现滚动条。
方法1:父级定义高度(height)
html代码:
css代码:
效果图:
原理:父级元素手动设置高度,可以解决子元素浮动后,父级元素无法自动获取高度的问题。
优点:代码少、简单、易掌握。
缺点:只适合高度已知的情况,有局限性。
建议:不建议使用。
方法2:父级元素样式中定义overflow:hidden
html代码:
css代码:
效果图:
原理:使用overflow:hidden时,父级元素不用定义高度,父级元素会自动获取浮动区域高度。
优点:代码少、简单易掌握、支持性好。
缺点:不能和position结合使用,会将超出部分隐藏。
建议:建议使用,但尽量避免和position同时使用。
方法3:父级元素后面加空的兄弟元素,并且其兄弟元素的样式设置:clear:both
html代码:
css代码:
效果图:
原理:添加一个空标签元素,通过clear:both,让父级元素自动获取浮动元素的高度。
优点:代码少、稳定、浏览器支持好、不容易出现问题。
缺点:原理不易被理解,并且如果浮动布局多,会增加很多空标签元素。
建议:不建议使用。
方法4:父级元素定义伪类:after和zoom
html代码:
css代码:
效果图:
原理:通过伪类,让父级元素自动获取浮动元素的高度。
优点:稳定,浏览器支持好。
缺点:代码稍微多点,原理不易掌握。
建议:建议使用,添加公共类,减少css代码。
方法5:父级元素添加overflow:auto
html代码:
css代码:
效果图:
原理:父级不能定义高度,使用overflow:auto,浏览器自动获取浮动区域高度。
优点:简单、代码少、支持好。
缺点:容易出现滚动条。
建议:不建议使用,容易出现滚动条。
相关文章推荐
- CSS浮动所差生的内容溢出问题及清除浮动的方法小结
- 一个老外弄的Clearing floats(清除浮动的方法)
- 浮动相关理解,以及清除浮动的方法总结
- 清除浮动的三种常用方法
- css清除浮动float的三种方法总结
- CSS清除浮动各种方法
- 清除浮动的常用方法
- 清除浮动的两种方法
- 实用CSS清除浮动的方法
- css清除浮动float的三种方法总结,为什么清浮动?浮动会有那些影响?
- 清除浮动的最佳方法
- CSS清除浮动常用方法小结 CSS clear both {overflow:auto;zoom:1;}
- CSS清除浮动大全,共8种方法
- IE6不支持用overflow:hidden来清除浮动,解决方法是:_zoom:1;
- CSS 清除浮动的方法及其原理理解
- 清除浮动的几种方法
- 三种css清除浮动的方法
- css清除浮动的方法有哪些??
- 三中清除浮动的方法