02.浮动的其他的特点1
作者：互联网
<!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>Document</title>
<style>
*{
margin:0;
padding:0;
}
.box1{
width:100px;
height:100px;
background-color: #bfa;
/* 浮动元素不会盖住文字，文字会自动环绕在浮动元素的周围
所以我们可以利用浮动来设置文字环绕图片的效果
*/
float:left;
}
</style>
</head>
<body>
<div class="box1"></div>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe officia natus quisquam ad quas exercitationem veritatis vero reprehenderit unde? Vel molestiae sunt explicabo suscipit dignissimos itaque, nihil velit accusantium voluptatum.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe officia natus quisquam ad quas exercitationem veritatis vero reprehenderit unde? Vel molestiae sunt explicabo suscipit dignissimos itaque, nihil velit accusantium voluptatum.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe officia natus quisquam ad quas exercitationem veritatis vero reprehenderit unde? Vel molestiae sunt explicabo suscipit dignissimos itaque, nihil velit accusantium voluptatum.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe officia natus quisquam ad quas exercitationem veritatis vero reprehenderit unde? Vel molestiae sunt explicabo suscipit dignissimos itaque, nihil velit accusantium voluptatum.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe officia natus quisquam ad quas exercitationem veritatis vero reprehenderit unde? Vel molestiae sunt explicabo suscipit dignissimos itaque, nihil velit accusantium voluptatum.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe officia natus quisquam ad quas exercitationem veritatis vero reprehenderit unde? Vel molestiae sunt explicabo suscipit dignissimos itaque, nihil velit accusantium voluptatum.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe officia natus quisquam ad quas exercitationem veritatis vero reprehenderit unde? Vel molestiae sunt explicabo suscipit dignissimos itaque, nihil velit accusantium voluptatum.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe officia natus quisquam ad quas exercitationem veritatis vero reprehenderit unde? Vel molestiae sunt explicabo suscipit dignissimos itaque, nihil velit accusantium voluptatum.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe officia natus quisquam ad quas exercitationem veritatis vero reprehenderit unde? Vel molestiae sunt explicabo suscipit dignissimos itaque, nihil velit accusantium voluptatum.
</p>
</body>
</html>未给box1设置浮动时：
给box1设置浮动后：
<!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>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.box2 {
background-color: blue;
/*
元素设置浮动以后，将会从文档流中脱离，从文档流中脱离后，元素的一些特点也会发生变化
脱离文档流的特点(而不是浮动独有的特点)：
块元素：
1、块元素不再独占页面的一行
2、脱离文档流以后，块元素的宽度和高度默认（没有指定的情况下！）都被内容撑开
行内元素：
行内元素脱离文档流以后会变成块元素，特点和块元素一样
总结：脱离文档流以后，不需要再区分块和行内了
*/
float:left;
}
</style>
</head>
<body>
<div class="box2">helloworld</div>
<a href="#">超链接</a>
</body>
</html>未给box2设置浮动时：
给box2设置浮动后：
给行内元素设置浮动：
<!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>Document</title>
<style>
*{
margin:0;
padding:0;
}
.s1{
background-color:yellow;
/* 行内元素不支持设置宽和高 */
float:left;
/* 设置浮动后变块元素，就可以设置宽和高 */
width:200px;
height:200px;
}
</style>
</head>
<body>
<span class="s1">我是一个span</span>
</body>
</html>
标签：02,浮动,exercitationem,consectetur,sunt,特点,dignissimos,elit,itaque 来源： https://www.cnblogs.com/sherryyuan/p/16399819.html