基础必备之float
2017-04-27 本文已影响8人
西兰花伟大炮
特性：float使块元素对外呈现内联元素的特性，对内呈现块元素的特性，浮动元素脱离文档流
（1）文字环绕效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.container{
margin: 20px auto;
width: 300px;
line-height: 1.5;
font-size: 16px;
border: 2px dotted limegreen;
}
.img-ctr{
float: left;
margin: 2px;
}
p{
margin-top: 2px;
}
</style>
</head>
<body>
<div class="container">
<p>翩若惊鸿，宛若游龙，仿佛兮若轻云之蔽月，飘摇兮若流风之回雪</p>
<p>还似旧时游上苑，车如流水马如龙,这是一首简单的小情歌</p>
<p>醉后不知天在水，满船清梦压星河</p>
<p>小楼一夜听春雨，深巷明朝卖杏花</p>
<p>幸得识君桃花面，从此阡陌多暖春</p>
<p>疏影横斜水清浅，暗香浮动月黄昏</p>
</div>
</body>
</html>
float.PNG
给p标签加一个margin-left实现两栏自适应
（2）.clearfix应用在包含浮动子元素的父级元素上
<style>
.clearfix::after{
content: '';
height: 0;
zoom: 1;
clear: both;
display: block;
}
.box{
width: 800px;
height: auto;
border: 3px solid orangered;
}
.box div{
width: 150px;
height: 150px;
background-color: #888;
border-radius: 10px;
float: left;
margin-right: 10px;
margin: 5px;
}
</style>
</head>
<body>
<div class="box clearfix">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
image.png
当float为right的时候，排列的顺序反向，相当于左边的镜像
浮动导致的问题: 1.父元素高度塌陷 2.其他元素出现异位
（2）清除浮动的方法
image.png
