float浮动定位
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了float浮动定位相关的知识，希望对你有一定的参考价值。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>float浮动定位</title>
<style>
div{
width:100px;
height:100px;
border:1px #000000 solid;
}
.div1{
background:darkred;
}
.div2{
background:green;
/*float:left;
margin-left:10px;*/
/*float浮动的位置只能用margin去调*/
}
.div3{
background:royalblue;
}
/*#box div*/.div1,.div2,.div3{
float:left;/*水平方向定位left\right\none*/
}
/*#box{
width:306px;
}*/
/*三个子元素div的总宽度+border,如果宽度不够，子元素浮动是上不去的*/
.text{
width:400px;
height:200px;
}
</style>
</head>
<body>
<h1>你们好吗</h1>
<!--<div id="box">-->
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<!--</div>-->
<h1 style="clear:both"></h1><!--从这开始清除浮动，别对下面的内容有影响，用任何块级元素都可以。或者给浮动的元素加父元素，给父元素加宽高，因为外面的父元素不会浮动起来，如上-->
<div class="text">这节课我们学习浮动的定位，如果用了浮动就会对下面的元素产生影响，如果不想有影响就用以上两种方式清除浮动</div>
</body>
</html>
以上是关于float浮动定位的主要内容，如果未能解决你的问题，请参考以下文章