浮动
3,162 阅读
加载中...
加载中...
<!-- 浮动是css里面布局用的最多的属性 -->
<style type="text/css" media="screen">
a{
display:block;
text-align:center;/*文本居中*/
line-height: 50px;/*行高和盒子一样高 所以垂直居中*/
width: 300px;
height: 50px;
background-color: orange;
}
.box1{
float: left;
width: 300px;
height: 400px;
background-color: green;
}
.box2{
float: left;
width: 400px;
height:400px;
background-color: skyblue;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<a href="http://www.baidu.com">点我去百度</a>
</body>
浮动有三个性质：
①脱标
证明1：
<style type="text/css" media="screen">
.box1{
float: left;
width: 300px;
height: 300px;
background-color: green;
}/*这个盒子脱离标准文档流 盒子2就是标准文档流的第一个盒子 盒子一会和盒子二重叠*/
.box2{
width: 400px;
height:400px;
background-color: skyblue;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
证明2：
<style type="text/css" media="screen">
span{
float: left;
width: 200px;
height: 200px;
background-color:skyblue;
} /*一个span标签在浮动后不需要转换块级元素依然可以设置宽高*/
</style>
</head>
<body>
<span></span>
</body>
所以 一旦一个元素浮动了 那么它将可以并排并设置宽高了 无论它是块级元素还是行内元素
②浮动的元素互相贴靠
<style type="text/css" media="screen">
.box1{
float:left;
width: 100px;
height: 400px;
background-color:yellowgreen;
}
.box2{
float:left;
width:120px;
height:420px;
background-color:orange;
}
.box3{
float:left;
width:140px;
height:300px;
background-color:skyblue;
}
/*如果有足够的空间3会贴着2 如果没有足够的空间 则会贴着1*/
</style>
</head>
<body>
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
</body>
③浮动的元素有“字围”效果
<style type="text/css" media="screen">
div{
float:left;
width:200px;
height:200px;
background-color:orange;
}
p{
}/*让div浮动 p不浮动 div虽然挡住了p 但是文字没有被挡住*/
</style>
</head>
<body>
<div></div>
<p>123文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>
</body>
关于浮动 初期要遵循一个原则：永远不是一个标签单独浮动 要浮动就一起浮动