float温习
Posted kim
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了float温习相关的知识，希望对你有一定的参考价值。
温习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;
}
以上是关于float温习的主要内容，如果未能解决你的问题，请参考以下文章
为啥我在这个 python 片段中得到 float 是不可迭代的？ [复制]