浮动(float:left 和float:right )以及BFC环境
1、BFC环境
BFC的意思是:块级格式化上下文。BFC是一个独立的布局环境,那你可以把它理解为一个特殊容器,在这个容器中按照一定规则进行物品摆放,并且不会影响其它环境里面的物品。如果一个元素符合触发BFC的条件,则BFC中的元素布局不受外部影响,也不会影响到BFC环境之外的东西
2、注意:
元素发生浮动后,就会对该元素后面的相邻元素造成影响,所以,为了不对该元素后面的相邻元素造成影响,需要对发生浮动的元素,营造一个BFC环境。变成BFC环境的方法有5种。
代码一:
<!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>body div:nth-of-type(1)</title>
</head>
<style>
div{
width: 100px;
height: 100px;
}
/* 被body包含的所有的div中,且 什么样的div呢排第1个的div */
body div:nth-of-type(1){
background-color: red;
float: left;
}
/* 被body包含的所有的div中,且 什么样的div呢排第2个的div */
body div:nth-of-type(2){
background-color: blue;
float: left;
}
body div:nth-of-type(3){
background-color: green;
float: left;
}
body div:nth-of-type(4){
background-color: red;
float: right;
}body div:nth-of-type(5){
background-color: blue;
float: right;
}body div:nth-of-type(6){
background-color: green;
float: right;
}
</style>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>
代码一的效果图:
代码二:
<!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>
</head>
<style>
ol li{
border: 1px red solid;
list-style-type: none;
float: left;
/*
当ol内部的元素浮动后,会影响ol之后的相邻元素,为了使ol的相邻元素不受影响,
我们可以将ol营造成BFC环境,使ol变成一个块级元素,这样就不会影响到ol的相邻元素了
*/
}
ol {
/* 把ol变成BFC环境的方法:以下四种 */
/* 方法一: */
display: flow-root;
/* 方法二: */
/* overflow: hidden; */
/* 方法三:直接给ol设置一个高度,在这个高度内,任你ol怎么造,都不会影响到ol后面的元素*/
/* height: 300px; */
/* 方法四(不太不常用):在ol后面的元素前,插队加一个空div,然后在这个空div里面设置一个样式style="clear:both"*/
}
</style>
<body>
<ol>
<li>因为疫情aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</li>
<li>我们不能随意乱跑eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee</li>
<li>这样也罢cccccccccccccccccccccccccccccccccccccccccccccccccccccc</li>
<li>躺在家里也省钱ddddddddddddddddddddddddddddddddd</li>
</ol>
<h1>我是ol后面的元素哦!</h1>
</body>
</html>
代码二的效果图:
代码三:
<!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>
</head>
<style>
ol li{
border: 1px red solid;
list-style-type: none;
float: left;
/*
当ol内部的元素浮动后,会影响ol之后的相邻元素,为了使ol的相邻元素不受影响,
我们可以将ol营造成BFC环境,使ol变成一个块级元素,这样就不会影响到ol的相邻元素了
*/
}
ol {
/* 把ol变成BFC环境的方法五:*/
/* 方法四(不太不常用):在ol后面的元素前,插队加一个空div,然后在这个空div里面设置一个样式style="clear:both"*/
/* 方法五:把方法四改进一下,在样式中,使用方法四的思想,具体操作如下: */
}
/* after是"之后"的意思,这里使用伪类选择器::after表示在ol内部的最后面,动态添加一个内容,内容为空,display方式为块级元素block,clear清除浮动 */
ol::after{
content: '';
display: block;
clear: both;
}
</style>
<body>
<ol>
<li>因为疫情aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</li>
<li>我们不能随意乱跑eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee</li>
<li>这样也罢cccccccccccccccccccccccccccccccccccccccccccccccccccccc</li>
<li>躺在家里也省钱ddddddddddddddddddddddddddddddddd</li>
</ol>
<h1>我是ol后面的元素哦!</h1>
</body>
</html>
代码三的效果图:
代码四:
<!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>练习 ::before或者::after</title>
</head>
<style>
label::before{
content: '*';
color: red;
font-size: 10px;
clear:both;
}
.aa::before{
content: '*';
color: blue;
font-size: 10px;
clear:both;
}
</style>
<body>
<label for="">用户名</label>
<label for="">密码</label>
<label for="">vvvvv</label>
<hr>
<label for="" class="aa">用户呼呼呼</label>
<label for="" class="aa">密码马马马马</label>
<label for="">kkkkkkk</label>
</body>
</html>
代码四的运行效果图: