极客观点
项目管理
HarmonyOS
问题一：向下面的html代码添加css，只在类选择器categoryMenu和productsAsideCategorys中添加左浮动属性，但这两个选择器所在包含块没有设置浮动，但结果却和其包含块设置了浮动一样。在css权威指南里提到“浮动元素受其包含块位置限制”，最终的结果应该是和没有添加浮动时候一样。
问题二：添加类选择器之后，为什么文字会重叠在一起。
问题三：使用css时候往往会产生很多意料之外的现象，在书上对嵌套的盒子使用浮动和定位，会产生什么效果也没有仔细讲，求大神推荐css书籍或者博客。
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="http://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="http://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
<style>
.categoryMenu{
float: left;
}
.productsAsideCategorys{
float: left;
}
</style>
</head>
<div class="categoryWithCarousel">
<div>
<div class="categoryMenu ">
<div class="eachCategory" cid="83">
<span class="glyphicon glyphicon-link"></span>
<a href="#nowhere">
平板电视
</a>
</div>
<div class="eachCategory" cid="82">
<span class="glyphicon glyphicon-link"></span>
<a href="#nowhere">
马桶
</a>
</div>
<div class="eachCategory" cid="81">
<span class="glyphicon glyphicon-link"></span>
<a href="#nowhere">
沙发
</a>
</div>
<div class="eachCategory" cid="80">
<span class="glyphicon glyphicon-link"></span>
<a href="#nowhere">
电热水器
</a>
</div>
<div class="eachCategory" cid="79">
<span class="glyphicon glyphicon-link"></span>
<a href="#nowhere">
平衡车
</a>
</div>
<div class="eachCategory" cid="78">
<span class="glyphicon glyphicon-link"></span>
<a href="#nowhere">
扫地机器人
</a>
</div>
<div class="eachCategory" cid="77">
<span class="glyphicon glyphicon-link"></span>
<a href="#nowhere">
原汁机
</a>
</div>
<div class="eachCategory" cid="76">
<span class="glyphicon glyphicon-link"></span>
<a href="#nowhere">
冰箱
</a>
</div>
<div class="eachCategory" cid="75">
<span class="glyphicon glyphicon-link"></span>
<a href="#nowhere">
空调
</a>
</div>
<div class="eachCategory" cid="74">
<span class="glyphicon glyphicon-link"></span>
<a href="#nowhere">
女表
</a>
</div>
<div class="eachCategory" cid="73">
<span class="glyphicon glyphicon-link"></span>
<a href="#nowhere">
男表
</a>
</div>
<div class="eachCategory" cid="72">
<span class="glyphicon glyphicon-link"></span>
<a href="#nowhere">
男士手拿包
</a>
</div>
<div class="eachCategory" cid="71">
<span class="glyphicon glyphicon-link"></span>
<a href="#nowhere">
男士西服
</a>
</div>
<div class="eachCategory" cid="69">
<span class="glyphicon glyphicon-link"></span>
<a href="#nowhere">
时尚男鞋
</a>
</div>
<div class="eachCategory" cid="68">
<span class="glyphicon glyphicon-link"></span>
<a href="#nowhere">
品牌女装
</a>
</div>
<div class="eachCategory" cid="64">
<span class="glyphicon glyphicon-link"></span>
<a href="#nowhere">
太阳镜
</a>
</div>
<div class="eachCategory" cid="60">
<span class="glyphicon glyphicon-link"></span>
<a href="#nowhere">
安全座椅
</a>
</div>
</div>
</div>
<div>
<div class="productsAsideCategorys" cid="83">
<div class="row ">
<a href="#nowhere">
屏大影院
</a>
<a href="#nowhere">
周末
</a>
<a href="#nowhere">
新品特惠
</a>
<a href="#nowhere">
32吋电视机
</a>
<a href="#nowhere">
智能网络
</a>
<div class="seperator"></div>
</div>
<div class="row ">
<a href="#nowhere">
USB高清解
</a>
<a href="#nowhere">
芒果TV在线
</a>
<a href="#nowhere">
抢购价
</a>
<a href="#nowhere">
USB解码
</a>
<a href="#nowhere">
32英吋
</a>
<a href="#nowhere">
10核
</a>
<a href="#nowhere">
TCL品牌日
</a>
<div class="seperator"></div>
</div>
<div class="row ">
<a href="#nowhere">
不要赠品
</a>
<a href="#nowhere">
新品上市
</a>
<a href="#nowhere">
4K硬屏
</a>
<a href="#nowhere">
领100元券
</a>
<a href="#nowhere" style="color: rgb(135, 206, 250);">
智能高清
</a>
<a href="#nowhere">
8月，酷暑
</a>
<a href="#nowhere" style="color: rgb(135, 206, 250);">
8月大促
</a>
<a href="#nowhere">
天猫定制
</a>
<div class="seperator"></div>
</div>
<div class="row ">
<a href="#nowhere">
智能操作系统
</a>
<a href="#nowhere">
金色外观
</a>
<a href="#nowhere">
三星屏幕
</a>
<a href="#nowhere">
客厅爆款
</a>
<a href="#nowhere">
八核配置
</a>
<a href="#nowhere">
限时特惠
</a>
<div class="seperator"></div>
</div>
<div class="row ">
<a href="#nowhere">
限时特惠
</a>
<a href="#nowhere">
热销爆款
</a>
<a href="#nowhere">
4K全高清
</a>
<a href="#nowhere" style="color: rgb(135, 206, 250);">
六核智能
</a>
<a href="#nowhere">
14核4K
</a>
<a href="#nowhere">
YUNOS
</a>
<a href="#nowhere" style="color: rgb(135, 206, 250);">
YUNOS
</a>
<a href="#nowhere">
64位处理器
</a>
<div class="seperator"></div>
</div>
<div class="row ">
<a href="#nowhere">
YUNOS
</a>
<a href="#nowhere">
微信电视
</a>
<a href="#nowhere">
4k超清
</a>
<a href="#nowhere">
64位真4K
</a>
<a href="#nowhere">
10核机芯
</a>
<a href="#nowhere">
V字黑釉底座
</a>
<a href="#nowhere">
4K超清
</a>
<div class="seperator"></div>
</div>
<div class="row ">
<a href="#nowhere">
64位14核
</a>
<a href="#nowhere">
海量影视
</a>
<a href="#nowhere">
人气爆款
</a>
<a href="#nowhere">
限时特惠
</a>
<a href="#nowhere">
真4K屏
</a>
<a href="#nowhere">
65吋巨屏
</a>
<a href="#nowhere" style="color: rgb(135, 206, 250);">
4K超清视界
</a>
<a href="#nowhere">
限时特惠
</a>
<div class="seperator"></div>
</div>
<div class="row ">
<a href="#nowhere">
55寸旗舰
</a>
<a href="#nowhere">
4K机皇
</a>
<a href="#nowhere">
曲面机皇
</a>
<a href="#nowhere" style="color: rgb(135, 206, 250);">
轻薄4K
</a>
<div class="seperator"></div>
</div>
</div>
</div>
</div>