温习float属性,但是可以用flex的话,就不怎么使用float,但是float仍然使用频繁
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
padding :0;
margin :0;
}
#ul{
width: 200px;
height: 150px;
list-style: none;
background-color: #6f6;
float: left;
/*display: none;*/
}
#ul>li{
background-color: green;
border-bottom: 1px solid #888;
}
#div{
width: 300px;
height: 150px;
background-color: #967;
float: left;
}
#div.second{
display: flex;
justify-content: space-around;
}
#div.second>a{
align-items: center;
flex-direction: column;
background-color: hotpink;
}
</style>
</head>
<body>
<ul id="ul">
<li>测试</li>
<li>测试</li>
<li>测试</li>
<li>测试</li>
</ul>
<div id="div">
<div class="second">
<a href="">测试a标签</a>
<a href="">测试a标签</a>
<a href="">测试a标签</a>
</div>
<div class="second">
<a href="">测试a标签</a>
<a href="">测试a标签</a>
<a href="">测试a标签</a>
</div>
<div class="second">
<a href="">测试a标签</a>
<a href="">测试a标签</a>
<a href="">测试a标签</a>
</div>
</div>
<p style="width: 100px;height:100px;border:1px solid #000;float: right;">111</p>
<p style="width: 100px;height:100px;border:1px solid #000;float: right;">222</p>
<p style="width: 100px;height:100px;border:1px solid #000;float: left;">333</p>
<p style="width: 100px;height:100px;border:1px solid #000;">这个未浮动,仍在文档流里面,被浮动的元素覆盖,但是浮动有一个特点,文字会尽量显现,不被遮盖</p>
</body>
</html>
float设计的初衷是为了让文字环绕,但是float会造成父元素塌陷的现象,滥用浮动和定位会造成让你崩溃的效果,所以慎用
对于浮动造成的父元素塌陷解决方法有以下几种
最优如下:
.clearfix:after { content: ‘‘; display: table; clear: both; } .clearfix { *zoom: 1; }
ie7及其以下的浮动有让人泪崩的效果,由于未曾做到兼容到那么久远,而且研究不够深刻,所以待以后再来补充。