02.浮动的其他的特点
作者：互联网
<!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;
}
.box2{
background-color: yellowgreen;
/*
元素设置浮动以后，将会从文档流中脱离，从文档流中脱离后，元素的一些特点也会发生变化
脱离文档流的特点(而不是浮动独有的特点)：
块元素：
1、块元素不再独占页面的一行
2、脱离文档流以后，块元素的宽度和高度默认（没有指定的情况下！）都被内容撑开
行内元素：
行内元素脱离文档流以后会变成块元素，特点和块元素一样
总结：脱离文档流以后，不需要再区分块和行内了
*/
float:left;
}
.box3{
background-color: orange;
}
.s1{
background-color:yellow;
/* 行内元素不支持设置宽和高 */
float:left;
/* 设置浮动后变块元素，就可以设置宽和高 */
width:200px;
height:200px;
}
</style>
</head>
<body>
<div class="box1"></div>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Vitae culpa provident ducimus asperiores totam? Assumenda tempore consectetur culpa, quis recusandae maxime placeat molestiae quo ipsum, ipsam doloribus officiis animi incidunt?
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Vitae culpa provident ducimus asperiores totam? Assumenda tempore consectetur culpa, quis recusandae maxime placeat molestiae quo ipsum, ipsam doloribus officiis animi incidunt?
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Vitae culpa provident ducimus asperiores totam? Assumenda tempore consectetur culpa, quis recusandae maxime placeat molestiae quo ipsum, ipsam doloribus officiis animi incidunt?
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Vitae culpa provident ducimus asperiores totam? Assumenda tempore consectetur culpa, quis recusandae maxime placeat molestiae quo ipsum, ipsam doloribus officiis animi incidunt?
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Vitae culpa provident ducimus asperiores totam? Assumenda tempore consectetur culpa, quis recusandae maxime placeat molestiae quo ipsum, ipsam doloribus officiis animi incidunt?
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Vitae culpa provident ducimus asperiores totam? Assumenda tempore consectetur culpa, quis recusandae maxime placeat molestiae quo ipsum, ipsam doloribus officiis animi incidunt?
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Vitae culpa provident ducimus asperiores totam? Assumenda tempore consectetur culpa, quis recusandae maxime placeat molestiae quo ipsum, ipsam doloribus officiis animi incidunt?
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Vitae culpa provident ducimus asperiores totam? Assumenda tempore consectetur culpa, quis recusandae maxime placeat molestiae quo ipsum, ipsam doloribus officiis animi incidunt?
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Vitae culpa provident ducimus asperiores totam? Assumenda tempore consectetur culpa, quis recusandae maxime placeat molestiae quo ipsum, ipsam doloribus officiis animi incidunt?
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Vitae culpa provident ducimus asperiores totam? Assumenda tempore consectetur culpa, quis recusandae maxime placeat molestiae quo ipsum, ipsam doloribus officiis animi incidunt?
</p>
<div class="box2">hello</div>
<div class="box3">hello</div>
<span class="s1">我是一个span</span>
</body>
</html>
标签：02,浮动,ipsum,consectetur,culpa,特点,elit,tempore,officiis 来源： https://www.cnblogs.com/sherryyuan/p/16385492.html