使用float使元素浮动，从而脱离文档流，可选值：
none：默认值
left：脱离文档流，向页面左侧浮动
right：脱离文档流，向页面侧右浮动
在文档流中，子元素的宽度默认占父元素的全部
在文档流中，父元素的高度默认是被子元素撑开的，也就是子元素多高，父元素就多高。当为子元素设置浮动以后，子元素会完全脱离文档流，此时将会导致子元素无法撑起父元素的高度，导致父元素的高度塌陷。由于父元素的高度塌陷了，则父元素下的所有元素都会向上移动，这样将会导致页面布局混乱
清除掉其他元素浮动对当前元素产生的影响，使用clear来完成功能，可选值：
none：默认值，不清除浮动
left：清除左侧浮动元素对当前元素的影响
right：清除右侧浮动元素对当前元素的影响
both：清除两侧浮动元素对当前元素的影响
清除对他影响最大的那个元素的浮动
解决塌陷：
直接在高度塌陷的父元素的最后，添加一个空白的div，由于这个div并没有浮动，所以他是可以撑开父元素的高度的。然后再对其进行清除浮动，这样可以通过这个空白的div来撑开父元素的高度，基本没有副作用。虽然可以解决问题，但是会在页面中添加多余的结构
可以通过after伪类向元素的最后添加一个空白的块元素，然后对其清除浮动，这样做和添加一个div的原理一样，可以达到一个相同的效果，而且不会在页面中添加多余的div，这是我们最推荐使用的方式，几乎没有副作用
就算跌倒，也要豪迈的笑
网友评论