float
程序员文章站
2022-07-15 10:30:47
...
float的四个参数：
- float:left
- float:right
- float:none
- float:inherit 继承浮动
float:left各元素按顺序排列 float:right各元素按倒序排列
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.test{
width: 100px;
height: 100px;
background: red;
margin-right: 10px;
float: right;
}
</style>
<body>
<div class="test">1</div>
<div class="test">2</div>
</body>float: right;float属性实现文本环绕效果：
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.per{width: 400px;
height: 400px;
border: 1px solid #ccc;
}
img{
width: 200px;
height: 100px;
}
</style>
<body>
<div class="per">
<img src="../img/dog.jpg" alt=""/>
杯子在多数时候，盛装的仅仅是半杯水，遇见的那个人依然似乎无法填补内心的空洞，时....
</div>在img样式下，加float:left;
在img样式下，加float:right;
span是内联不能设置高宽，设置高宽则在浏览器中其内容显示不出来，如果加上浮动，内联就会变为块级样式。
解决浮动副作用：
- 手动给父元素添加高度
- 通过clear清除内部和外部浮动
- 给父元素添加overfloat属性并结合zoom:1使用
- 给父元素添加浮动
1.给.test添加浮动后，父元素的高度变为0，此时手动给父元素添加高度。
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.per{width: 500px;
/*height: auto;*/
height: 32px;
border: 1px solid #000;
}
.test{
width: 100px;
height: 30px ;
background: red;
border: 1px solid #ffffff;
float: left;
}
</style>
<body>
<div class="per">
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
</div>2.clear属性： clear:none|left|right|both
3.overflow和zoom组合有弊端：溢出的部分被截取了。
.per{width: 500px;
height: auto;
border: 1px solid #000;
overflow: hidden;/*处理溢出问题*/
zoom:1;}4.给父元素添加浮动，会影响其他元素。这时就要给其他元素设置clear属性。
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.per{width: 500px;
height: auto;
border: 1px solid #000;
float: left;
}
.test{
width: 100px;
height: 30px ;
background: red;
border: 1px solid #ffffff;
float: left;
}
.bro{
width: 100px;
height: 100px;
background: blue;
clear: both;
}
</style>
<body>
<div class="per">
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
</div>
<div class="bro"></div>这里，建议还是使用第二种方法。