脱离文档流

css清除浮动float的三种方法总结,为什么清浮动?浮动会有那些影响?一起来$('.float')

a 夏天 提交于 2019-12-03 17:46:11
一、抛一块问题砖(display: block)先看现象: 分析HTML代码结构: <div class="outer"> <div class="div1">1</div> <div class="div2">2</div> <div class="div3">3</div> </div> 分析CSS代码样式: .outer{border: 1px solid #ccc;background: #fc9;color: #fff; margin: 50px auto;padding: 50px;} .div1{width: 80px;height: 80px;background: red;float: left;} .div2{width: 80px;height: 80px;background: blue;float: left;} .div3{width: 80px;height: 80px;background: sienna;float: left;} 这里我没有给最外层的DIV.outer 设置高度,但是我们知道如果它里面的元素不浮动的话,那么这个外层的高是会自动被撑开的。但是当内层元素浮动后,就出现了一下影响: (1):背景不能显示 (2):边框不能撑开 (3):margin 设置值不能正确显示 二、清楚css浮动: 方法一:添加新的元素 、应用 clear