css清除浮动的方法
我们有多种清除浮动的方法，在这里给大家介绍四种：
- 给父盒子设置高度
- clear:both
- 伪元素清除法
- overflow：hidden
给父盒子设置高度>>>
这个方法给大家上个代码介绍，它的使用不灵活，一般会常用页面中固定高度的，并且子元素并排显示的布局。比如：导航栏
clear：both
clear：意思就是清除的意思。
有三个值：
left：当前元素左边不允许有浮动元素
right：当前元素右边不允许有浮动元素
both：当前元素左右两边不允许有浮动元素
给浮动元素的后面加一个空的div，并且该元素不浮动，然后设置clear：both。
html结构：
<div> ???????<ul> ???????????<li>Python</li> ???????????<li>web</li> ???????????<li>linux</li> ???????????<!-- 给浮动元素最后面加一个空的div 并且该元素不浮动 ，然后设置clear:both ?清除别人对我的浮动影响--> ???????????<!-- 内墙法 --> ???????????<!-- 无缘无故加了div元素 ?结构冗余 --> ???????????<div class="clear"></div> ???????????????????</ul> ???????</div><div class="box"> ???????</div> ???????
css样式
??????*{ ???????????padding: 0; ???????????margin: 0; ???????} ???????ul{ ???????????list-style: none; ???????????????} ???????div{ ???????????width: 400px; ???????????????} ???????????????div ul li { ???????????float: left; ???????????width: 100px; ???????????height: 40px; ???????????background-color: red; ???????} ???????.box{ ???????????width: 200px; ???????????height: 100px; ???????????background-color: yellow; ???????} ???????.clear{ ???????????clear: both; ???????}伪元素清除法(常用)>>>
给浮动子元素的父盒子，也就是不浮动元素，添加一个clearfix的类，然后设置
.clearfix:after{ ???/*必须要写这三句话*/ ???content: ‘.‘; ???clear: both; ???display: block;}新浪首页推荐伪元素清除法的写法
???????????????/*新浪首页清除浮动伪元素方法*/ ?????????????content: "."; ???????????????display: block; ???????????????height: 0; ???????????????clear: both; ???????????????visibility: hidden ???????
overflow:hidden(常用)>>>
overflow属性规定当内容溢出元素框时发生的事情。
说明：
这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。
有五个值：
| 值 | 描述 |
|---|---|
| visible | 默认值。内容不会被修剪，会呈现在元素框之外。 |
| hidden | 内容会被修剪，并且其余内容是不可见的。 |
| scroll | 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 |
| auto | 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 |
| inherit | 规定应该从父元素继承 overflow 属性的值。 |
逐渐演变成overflow：hidden清除法。
其实它是一个BFC区域: https://blog.csdn.net/riddle1981/article/details/52126522
css清除浮动的方法
原文地址：https://www.cnblogs.com/konghui/p/9900303.html