在清除浮动前我们要了解两个重要的定义:
浮动的定义:使元素脱离文档流,按照指定方向发生移动,遇到父级边界或者相邻的浮动元素停了下来。
高度塌陷:浮动元素父元素高度自适应(父元素不写高度时,子元素写了浮动后,父元素会发生高度塌陷)
知道浮动和为什么要清除浮动之后我们可以开始学习如何清除浮动了,这时候我们就需要用到清除浮动的属性clear,
clear:left | right | both | none | inherit:元素的某个方向上不能有浮动元素
clear:both:在左右两侧均不允许浮动元素。
具体清楚浮动的方法主要一下几种:
1、clear清除浮动(添加空div法)
在浮动元素下方添加空div,并给该元素写css样式: {clear:both;height:0;overflow:hidden;}12
2、方法:给浮动元素父级设置高度
我们知道了高度塌陷是应为给浮动元素的父级高度是自适应导致的,那么我们给它的设置适当的高度就可以解决这个问题了。
缺点:在浮动元素高度不确定的时候不适用1234
3、方法:以浮制浮(父级同时浮动)
何谓“以浮制浮”呢?就是**让浮动元素的父级也浮动**。
缺点:需要给每个浮动元素父级添加浮动,浮动多了容易出现问题。1234
4、方法:父级设置成inline-block
缺点:父级的margin左右auto失效,无法使用margin: 0 auto;居中了12
5、 br 清浮动
清除浮动:
--就是让当前元素左右两边都不存在浮动元素的时候,才把元素放在标准流中显示。
--清除浮动的四种方式:
1.使用空标记清除浮动,隔墙放。增加标签。
在浮动标签的后边加一个
其实究其原因,就两种原理清除与闭合,可以看下我写的这个思路可能会清楚一点
网页链接