Four float parameters: left, right, none, inherit inheritance
Realize text wrapping, horizontal arrangement, and solve the collapse of the parent element.
How to use clear float to solve the collapse problem
Use float: left; realize the horizontal arrangement of block-level elements
<style>
*{
padding: 0;
margin: o;
}
.test{
width:100px;
height: 100px;
background:red ;
float: left;
margin-right: 10px;
}
</style>
<body>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
</body>
Float to achieve text wrapping effect:
use float: left or right
Why can float around the picture?
In fact, with float will become a block element, willDeparture from normal document flowArrange the layout. butStill occupySpace for normal text flow.
The text is displayed normally after the picture is displayed.
Positioning mechanism in css
Standard flow, positioning, floating
<style>
*{
padding: 0;
margin: o;
}
.per{
width:500px;
height: auto;
border:1px solid #000 ;
}
.test{
width:100px;
height: 100px;
background:red ;
float: left;
}
.bro{
width:100px;
height: 100px;
background:blue ;
}
</style>
<body>
<div class="per">
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="bro"></div>
</div>
</body>
At this time, it is found that the height is gone, and float makes it out of the document flow, which is one of the side effects.
bro does not float. It should appear under the parent element, but it appears under test. This is the second side effect caused by floating.
给父元素加高度,但这方法不适用，当给子元素加数量时又会撑开。
.per{
width:500px;
height: 10px;
border:1px solid #000 ;
}
2.用clear属性
clear：none，left，right，both
3.给父元素加overflow和zoom
.per{
width:500px;
height: 10px;
border:1px solid #000 ;
overflow:hidden; /*解决溢出问题的*/
zoom:1; /*IE专属的*/
}
使用这两个可以很好的兼容浏览器
4.给父元素也加float元素
但有个缺点：父类的兄弟元素则也陷入了
还要给父类的兄弟元素加clear:both;
The use of before:: pseudo-class floating clearing can be better achieved in the future
application
<style>
*{
padding:0;
margin: 0;
}
.head{
width:100%;
height: 64p×;
}
.logo{
width:160px;
height: 40p×;
float:left;
}
.nav{
width:320px;
height: 64p×;
float:left;
}
.nav-li{
width: 80px;
height:64px;
text-align: center;
line-height: 64px;
color:#333;
float:left;
}
.icons{
width:320px;
height:64px;
float:right;
}
.i01{
width: 64px;
height:64px;
float:left;
background: url("o01.png") center no-repeat;
}
.i02{
width: 64px;
height:64px;
float:left;
background: url("o01.png") center no-repeat;
}
.i03{
width: 64px;
height:64px;
float:left;
background: url("o01.png") center no-repeat;
}
.i04{
width: 64px;
height:64px;
float:left;
background: url("o01.png") center no-repeat;
}
.i05{
width: 64px;
height:64px;
float:left;
background: url("o01.png") center no-repeat;
}
</style>
<body>
<div class="head">
<div class="logo">
<img src="logo.png" width="160" height="40" alt="">
</div>
<div class="nav">
<div class="nav-li">实战</div>
<div class="nav-li">路径</div>
<div class="nav-li">猿问</div>
<div class="nav-li">手记</div>
</div>
<div class="icons">
<div class="i01"></div>
<div class="i01"></div>
<div class="i03"></div>
<div class="i04"></div>
<div class="i05"></div>
</div>
</div>
</body>
NEXT:
CSS positioning. Make the element fixed in any position on the page.