<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS基本定位机制-浮动</title>
<style>
/*
一、浮动：使元素浮起来，脱离文档流，从而使盒子能够灵活的移动。
二、 浮动的属性：
float 属性设置元素的浮动
可选值：
none 元素不浮动，默认在文档流中排列（默认值）
left 元素向左移动
right 元素向右移动
三、特点：
1.浮动元素会脱离文档流
1.脱离文档流的控制，从而使盒子更灵活的移动
2.浮动元素不会保留原来的位置
2.浮动元素将具有行内块元素的特点
1.无论是块元素还是行内元素，都可以设置浮动，浮动后将具有行内块元素的特点
2.块元素设置浮动后，大小根据内容决定
3.行内元素设置浮动，不需要通过display 转换为块，就可以设置宽度和高度
3.浮动的盒子会一行显示并且在顶部对齐
1.多个盒子设置浮动，他们会一行显示并且顶部对齐
2.浮动元素互相贴靠在一起，没有缝隙，如果父元素宽度不能容纳这些盒子，
多出的盒子会另起一行对齐显示
四、浮动的应用:
1.浮动元素目的就是为了让盒子横向｛水平｝排列，完成水平方向的布局
2.浮动元素不会盖住文字，文字会自动环绕在浮动元素的周围
五、浮动的注意：
1.浮动元素无法超越文档流的块元素
2.浮动元素只会影响后面文档流中的盒子，不会影响前面文档流中的盒子
*/
div{
width: 200px;
height: 200px;
}
.box1{
background-color: #c7edcc;
}
.box2{
background-color: #fed6e0;
float: left;
}
.box3{
background-color: #dce2f1;
float: left;
}
span{
background-color: yellowgreen;
width: 100px;
height: 100px;
float: left;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2">我是div</div>
<div class="box3"></div>
<span>我是span1</span>
<span>我是span2</span>
<span>我是span3</span>
<span>我是span4</span>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt ut nulla repellat perferendis aperiam, possimus molestiae nam quia, laboriosam, quasi reprehenderit. Vitae nesciunt eius quis consequuntur ratione, recusandae quo delectus!Lorem</p>
</body>
</html>
版权属于：
yu
作品采用：
《
署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)
》许可协议授权
评论 (0)