float的设计初衷仅仅是：为了文字环绕效果
float的包裹与破坏
包裹：收缩、坚挺、隔绝（BFC）
破坏：父元素高度塌陷
<!DOCTYPE html><html> ?<head> ???<meta charset="utf-8" /> ???<title>Layout</title> ???<style> ?????.box{ ?????????border: 1px solid red; ?????????width: 300px; ?????????margin: 20px auto; ?????} ?????.left{ ?????????float: left; ?????????height: 100px; ?????????width: 50px; ?????????border: 1px solid black; ?????} ?????.right{ ?????????float: right; ?????????height: 100px; ?????????width: 50px; ?????????border: 1px solid green; ?????} ???</style> ?</head> ?<body> ???<div class="box"> ???????<div class="left"></div> ???????<div class="right"></div> ???</div> ?</body></html>如何降低float破坏性的影响（清除浮动）？
1、底部插入clear:both;
<!DOCTYPE html><html> ?<head> ???<meta charset="utf-8" /> ???<title>Layout</title> ???<style> ?????.box { ???????border: 1px solid red; ???????width: 300px; ???????margin: 20px auto; ?????} ?????.clearfix { ???????clear: both; ?????} ?????.left { ???????float: left; ???????height: 100px; ???????width: 50px; ???????border: 1px solid black; ?????} ?????.right { ???????float: right; ???????height: 100px; ???????width: 50px; ???????border: 1px solid green; ?????} ???</style> ?</head> ?<body> ???<div class="box"> ?????<div class="left"></div> ?????<div class="right"></div> ?????<div class="clearfix"></div> ???</div> ?</body></html><!DOCTYPE html><html> ?<head> ???<meta charset="utf-8" /> ???<title>Layout</title> ???<style> ?????.box { ???????border: 1px solid red; ???????width: 300px; ???????margin: 20px auto; ?????} ?????.box:after { ???????content: ‘‘; ???????display: block; ???????height: 0; ???????overflow: hidden; ???????clear: both; ?????} ?????.left { ???????float: left; ???????height: 100px; ???????width: 50px; ???????border: 1px solid black; ?????} ?????.right { ???????float: right; ???????height: 100px; ???????width: 50px; ???????border: 1px solid green; ?????} ???</style> ?</head> ?<body> ???<div class="box"> ?????<div class="left"></div> ?????<div class="right"></div> ???</div> ?</body></html><!DOCTYPE html><html> ?<head> ???<meta charset="utf-8" /> ???<title>Layout</title> ???<style> ?????.box { ???????border: 1px solid red; ???????width: 300px; ???????margin: 20px auto; ?????} ?????.box:after { ???????content: ‘‘; ???????display: table; ???????clear: both; ?????} ?????.left { ???????float: left; ???????height: 100px; ???????width: 50px; ???????border: 1px solid black; ?????} ?????.right { ???????float: right; ???????height: 100px; ???????width: 50px; ???????border: 1px solid green; ?????} ???</style> ?</head> ?<body> ???<div class="box"> ?????<div class="left"></div> ?????<div class="right"></div> ???</div> ?</body></html>2、父元素BFC/haslayout
<!DOCTYPE html><html> ?<head> ???<meta charset="utf-8" /> ???<title>Layout</title> ???<style> ?????.box { ???????border: 1px solid red; ???????width: 300px; ???????margin: 20px auto; ???????overflow: hidden; ?????} ?????.left { ???????float: left; ???????height: 100px; ???????width: 50px; ???????border: 1px solid black; ?????} ?????.right { ???????float: right; ???????height: 100px; ???????width: 50px; ???????border: 1px solid green; ?????} ???</style> ?</head> ?<body> ???<div class="box"> ?????<div class="left"></div> ?????<div class="right"></div> ???</div> ?</body></html>float的特性
1、元素block块状化（砖头化）；
2、破坏性造成的紧密排列特性（去空格化）。
CSS深入理解之float（HTML/CSS）
原文地址：https://www.cnblogs.com/fengxiongZz/p/8148673.html