有哪里不懂的，请在下面留言，我每天都看，有时间我会一一解答，看评论区也许有人提出了跟你同样想问的问题，可以看看我给出的回答，不用重复提问。
- 浮动和绝对定位的基础知识网上随处可见，请自行查阅资料，本篇是帮助你在某场景下正确的用上你学到的知识、在莫名其妙前面找出问题所在、在做什么的时候可能会出现这样的问题、进一步的规范的css，本篇如出现错误，还劳烦请您在评论区指出，在此先表示感谢。
浮动里面的浮动
- 其实我们平时用的一些清除浮动的方法里面有一些叫做闭合浮动,此处不详解到底该叫清除还是叫闭合，请自行查阅相关资料
- 结构如图如代码所示，左右两个UL，一个浮左，一个浮右
- 基本概念，如果一个父元素的高度是由子元素所撑开的，父元素不做任何处理，子元素浮动，则父元素高度消失
- 一般水平导航的做法是用li里面的元素去撑开li的高度，li设置了浮动，ul在不做处理的情况下高度会消失，在这个示例里面，我们是有左右两个浮动的ul，所以这里不需要用.clearfix等方式再处理一遍，这里已经算是清除了浮动，因为float具有间接“包裹性”，，首先明确一点，“包裹性”可以用来清除浮动，我之前写的YY游戏页面里面有讲到一小段float会隐式的改变display，让其变成inline-block，因为inline-block具有“包裹性”，然后这里的ul加上float之后高度没有消失，如果嫌绕，可以理解为，浮动里面有浮动，这个浮动的父元素高度不会消失。
复制代码
* { margin: 0; padding: 0;}body { background: #E0FFFF;}ul,li { list-style: none;}a { text-decoration: none;}.container { width: 1200px; background: #C1FFC1; margin-left: auto; margin-right: auto; padding: 20px;}.clearfix::after { display: block; content: ''; clear: both;}/* -------------------- */.nav-1 { float: left;}.nav-2 { float: right;}.nav li { float: left;}.nav li a:hover { background: #63B8FF;}.nav li a { display: inline-block; font-size: 16px; line-height: 16px; padding: 10px 20px; margin: 0 10px; background: #6495ED; color: #fff;}复制代码 绝对定位（absolute）的隐式改变
浮动的问题主要还是ul-li等结构里用得比较多，这里我用上一篇的例子进行详细讲解,
在这里只讲解左半边的轮播图这个部分里面关于浮动的问题，这里的这个轮播图的实现方式的结构是ul-li结构，每个li里面放了图片和图片描述，给li设置浮动让五张图成一行排列，然后再给大盒子设置固定宽高和超出隐藏作为可视区域且设置relative，包含li的ul设置absolute再用JS来控制其left值来实现轮播效果。
在这里的重点在于，这里的实现轮播方式的html结构ul加上absolute，对于大部分还没有深入去查阅相关资料的初学者们可能会说：诶，你这个ul不是浮动的，那得再加个.clearfix吧？其实这里已经清除浮动了，用chrome调试工具鼠标移到这块，你可以看到这里虽然没有加.clearfix，但ul还是有高度的，这是因为这里的absolute清除了浮动影响，absolute和float一样会隐式的改变display，让其变成inline-block，如果上所说，inline-block具有包裹性，这里加上absolute之后就清除浮动了，你也可以手动试试单独给你想清除浮动的元素加上inline-block去验证一下，同样具有包裹性的还有一个是overflow:hidden;也可以清除浮动复制代码
.banner { width: 497px; height: 246px; position: relative; overflow: hidden;}.banner_list { position: absolute; left: 0; top: 0; width: 500%;}.banner_list li { float: left; position: relative;}.banner_list img { width: 497px; height: 246px;}.banner_fd { position: absolute; left: 0; bottom: 0; width: 100%; height: 40px; background-color: #fff;}.banner_fd h3 { font: 14px/16px "Microsoft YaHei", "微软雅黑"; height: 16px; border-left: solid 3px #DD3A29; padding-left: 8px; margin: 12px 9px;}.prev,.next { width: 30px; height: 50px; filter: progid: DXImageTransform.Microsoft.gradient(enabled='true', startColorstr='#7F000000', endColorstr='#7F000000'); background-color: rgba(0, 0, 0, 0.8); position: absolute; top: 50%; margin-top: -45px;}.prev { left: 0;}.next { right: 0;}复制代码