<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
ul,li{margin:0;padding:0}
ul{border:3px solid black;}
li{width:100px;height:100px;list-style: none;background:blue;}
.li1{width:80px;background:red;float: left;}
.clearfix:after{display: block;content:‘‘;clear:both}
</style>
</head>
<body>
<ul>
<li class="li1"></li>
<li class="li2">1234567890</li>
</ul>
</body>
</html>
1.同级关系下,li1浮动，li2不浮动，就会导致li2元素跑到li1下面，但是li2里面的内容会被挤开，证明了浮动是半脱离文档流的，所以同级关系尽量都浮动
2.同级都浮动的情况下，如果父级没有给高度，那么父级元素会因为没有内容撑开自身，而导致页面出问题。
解决方法：
a.直接在父级加一个 overflow:hidden
b.在子级同级在写一个块元素，然后给块元素加上 clear:both
c.在style里自己添加个伪类.clearfix，.clearfix:after{display: block;content:‘‘;clear:both}
d.给父级加上高度，也能解决
这四个方法都能解决浮动带来的问题
3.浮动默认把行内元素转为块元素
html浮动小问题
原文地址：https://www.cnblogs.com/wxiaoyu/p/9484424.html