Table of contents
- 1. Floating
- 2. Floating exercises
- 3. The nature of floating
- 4. Clear floating
-
- The impact of floating
- 1. Clear floating method 1: height property
- 2. Clear floating method 2: clear property
- 3. Clear floating method three: partition wall method
- 4. Clear floating method four: inner wall method
- 5. Clear floating method five: Pseudo-class (add pseudo-class attributes to all elements affected by floating)
- 6. Clear floating method six: overflow attribute (set for parent element)
- 5. Floating case
1. Floating
The floating attribute is specially used for side-by-side layout of web pages
Function: break away from standard document flow, no longer restricted by element level, can display side by side, and can set width and height
float: The attribute is to set the element to float
Attribute value: left, right
float: left;
float: right;
Floating feature: Elements will be pasted in order of writing. In the same parent box, you can set left floating or right floating
<div>
<p class="left">1</p>
<p class="right">2</p>
<p class="left">3</p>
<p class="right">4</p>
<p class="left">5</p>
<p class="right">6</p>
<p class="left">7</p>
<p class="right">8</p>
<p class="left">9</p>
<p class="right">10</p>
</div>
Supplementary knowledge point: All sibling elements, if one is floating, all remaining sibling elements must be set to float
If the floating element does not set the width, it will not fill the parent box, but will be widened by the content
2. Floating exercises
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.inner{
width: 970px;
margin: 0 auto;
}
.inner .top{
height: 103px;
margin-bottom: 10px;
}
.inner .top .logo {
width: 277px;
height: 103px;
float: left;
background-color: red;
}
.inner .top .nav{
width: 679px;
height: 103px;
float: right;
}
.inner .top .nav .news {
width: 137px;
height: 49px;
background: greenyellow;
margin-bottom: 8px;
float:right;
}
.inner .top .nav .nav_li{
height: 46px;
background: #000;
background: greenyellow;
float: right;
width: 100%;
}
.inner .middle{
height: 435px;
margin-bottom: 10px;
}
.inner .middle .left {
width: 310px;
height: 435px;
background-color: orange;
float: left;
}
.inner .middle .right{
width: 650px;
height: 435px;
float: right;
}
.inner .middle .right .r_top{
height: 401px;
margin-bottom: 10px;
}
.inner .middle .right .r_top .r_top_left{
width: 450px;
height: 401px;
float: left;
}
.inner .middle .right .r_top .r_top_left .s_top{
height: 240px;
background: blue;
margin-bottom: 10px;
}
.inner .middle .right .r_top .r_top_left .s_center{
height: 110px;
background: blue;
margin-bottom: 10px;
}
.inner .middle .right .r_top .r_top_left .s_bottom{
height:30px;
background: blue;
}
.inner .middle .right .r_top .r_top_right{
width: 190px;
height:401px;
background: purple;
float: right;
}
.inner .middle .right .r_bottom{
height: 25px;
background: green;
}
.inner .bottom {
height: 35px;
background: navy;
}
</style>
</head>
<body>
<div class="inner">
<!-- 顶部导航 -->
<div class="top">
<div class="logo"></div>
<div class="nav">
<div class="news"></div>
<div class="nav_li"></div>
</div>
</div>
<!-- 中心部分 -->
<div class="middle">
<div class="left"></div>
<div class="right">
<div class="r_top">
<div class="r_top_left">
<div class="s_top"></div>
<div class="s_center"></div>
<div class="s_bottom"></div>
</div>
<div class="r_top_right"></div>
</div>
<div class="r_bottom"></div>
</div>
</div>
<!-- 底部footer -->
<div class="bottom">
</div>
</div>
</body>
</html>
3. The nature of floating
1. Floating elements are off-label
The standard flow element is to distinguish row, block
We know that floating elements are separated from the standard flow, so what are the characteristics of floating elements after breaking away from the standard flow?
Answer: Floating elements, after leaving the standard flow,Both width and height can be set, and side-by-side display can also be achieved, does not distinguish between element status, that is, does not distinguish between inline elements and block-level elements
div p {
width: 100px;
height: 100px;
background: purple;
}
div span {
width: 100px;
height: 100px;
background: orange
}
Both the p tag and the span tag have width and height set, but due to the limitation of the element type, the span tag has no width and height
After the elements inside the div are floated
div p {
width: 100px;
height: 100px;
background: purple;
float: left;
}
div span {
width: 100px;
height: 100px;
background: orange;
float: left;
}
It should be noted that if one of the sibling elements is floating, the rest must be floating
If neither the p tag nor the span tag has a width and height set at this time, the width of the element will be widened by the content, and will not automatically fill the parent box
div p {
background: purple;
float: left;
}
div span {
background: orange;
float: left;
}
2. Welt side by side
If the width of the parent box is not enough to store all the child boxes, those that cannot be stored will automatically search forward, knowing that the vacant space can be stored, so as to display on the side
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
div {
width: 400px;
height: 400px;
border: 5px solid red;
margin: 100px auto
}
div p{
width: 100px;
height: 100px;
float: left;
}
div p.par1{
height: 250px;
background: green;
}
div p.par2{
height: 200px;
background: blue;
}
div p.par3{
background: yellow;
}
div p.par4{
width: 300px;
background: cyan;
}
</style>
</head>
<body>
<div>
<p class="par1">1</p>
<p class="par2">2</p>
<p class="par3">3</p>
<p class="par4">4</p>
</div>
</body>
If the span of the parent box is not enough, the child boxes will be aligned in turn, but if there is a gap in the front element, the element that needs to be aligned will not be drilled, and the phenomenon of drilling will not appear, but it will query the remaining width to achieve sequential alignment
div {
width: 600px;
height: 400px;
border: 5px solid red;
margin: 100px auto
}
div p{
width: 100px;
height: 100px;
float: left;
}
div p.par1{
height: 250px;
background: green;
}
div p.par2{
width: 330px;
background: blue;
}
div p.par3{
height: 200px;
background: yellow;
}
div p.par4{
width: 400px;
background: cyan;
}
If the width of a certain child box is greater than the parent box, there will be an overflow state
div {
width: 600px;
height: 400px;
border: 5px solid red;
margin: 100px auto
}
div p{
width: 100px;
height: 100px;
float: left;
}
div p.par1{
height: 250px;
background: green;
}
div p.par2{
width: 330px;
background: blue;
}
div p.par3{
height: 200px;
background: yellow;
}
div p.par4{
width: 650px;
background: cyan;
The principle of welting to the right is the same as that to the left, and the welting is also performed in sequence
3. Float in turn to practice side-by-side
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.outer {
height: 440px;
width: 940px;
padding: 10px;
border: 2px solid #000;
margin: 10px auto
}
.outer div {
float: left;
}
.outer .box1{
width: 300px;
height: 260px;
background: pink;
}
.outer .box2 {
width: 240px;
height: 260px;
background:cyan;
}
.outer .s_box{
width: 200px;
height: 130px;
}
.outer .box3 {
background: yellowgreen;
}
.outer .box4 {
background: greenyellow;
}
.outer .box7{
width: 300px;
height: 180px;
background: blueviolet;
}
.outer .s_box2 {
width: 160px;
height: 180px;
}
.outer .box5 {
background: purple;
}
.outer .box6 {
background: palegreen;
}
</style>
</head>
<body>
<div class="outer">
<div class="box1"></div>
<div class="box2"></div>
<div class="s_box box3"></div>
<div class="s_box box4"></div>
<div class="s_box box4"></div>
<div class="s_box box3"></div>
<div class="box7"></div>
<div class="s_box2 box5"></div>
<div class="s_box2 box6"></div>
<div class="s_box2 box5"></div>
<div class="s_box2 box6"></div>
</div>
</body>
</html>
4. Floating margin collapse problem
The standard stream has a phenomenon of margin collapse
In the vertical direction, if there is a margin that meets the two boxes, it is not the sum of the attribute values between the two boxes, but to compare the two boxes whose margin is larger, and the height with the larger margin value is used
The margin of the box at the same level collapses
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 200px;
height: 200px;
margin: 50px;
background: blue
}
.bottom{
margin-top: 100px;
}
</style>
</head>
<body>
<div></div>
<div class="bottom"></div>
</body>
Parent-child box, if margin-top is set in the child box, the parent box is not set or the value of margin-top is smaller than the child box, there will be margin collapse at this time
How to solve the phenomenon of margin collapse, if it is a brother relationship, set a margin in one direction uniformly, for example, set margin-bottom
If it is a parent-child box, you can add border or padding to the parent box. In fact, these two methods are unreasonable. Under normal circumstances, you will not use the child box to kick the parent box upwards, but use the parent box to add padding.
Summary: Floating elements do not have the margin collapse phenomenon of standard flow, each has its own margin, and will not collapse each other;
5. Floating elements give way to the standard flow
Each element in the standard stream has its own standard stream position, and the following elements can only be loaded after the previous elements.
The floating element breaks away from the standard flow, and it will allow the following elements to occupy their original position. From the display effect, it seems to be "floating" by itself, which we call it off-label
standard stream display
At this point the pink box floats
6. Word circle phenomenon
Word circumference phenomenon: Among elements at the same level, if the front element is floating, the standard flow behind will occupy the text of the front element. If there is text in the back box, it will not occupy the position of the front box like the box, but bypass the floating element The position, around the loading, realizes the character encircling phenomenon.
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.outer{
width: 300px;
height: 300px;
margin: 100px auto;
}
.par{
width: 100px;
height: 100px;
background: pink;
float: left;
}
.box{
width: 200px;
height: 200px;
background: cyan;
}
</style>
</head>
<body>
<div class="outer">
<p class="par"></p>
<div class="box">
111文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
</div>
</div>
</body>
Cases in which we can use the font size to realize the obvious introduction in the web page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 300px;
padding: 10px;
border: 1px solid red;
margin: 30px auto;
}
div img{
width: 100px;
float: right;
margin: 8px;
}
</style>
</head>
<body>
<div>
<img src="images/sxb.jpg" alt="">
<p>
宋小宝，本名宋宝利，1981年1月5日出生，吉林省通化市辉南县楼街乡光明村人 [1] ，中国内地男演员，喜剧表演艺术家赵本山先生的第32位徒弟。
</p>
<p>
2009年，因参加综艺节目《本山快乐营》小有名气。2011年，因参演辽宁卫视春节晚会与师父赵本山合作小品《相亲》而获得更多关注。2012年8月，凭借电视剧《樱桃》参加第四届新农村电视艺术节获最佳男主角 [2] 。同年12月10日，凭借电视剧《樱桃》参加第八届华鼎奖获当代类最佳男演员。2013年10月，第十届华鼎奖获最受中国媒体欢迎的演员。2014年8月，凭借电视剧《樱桃红》参加第十三届华鼎奖获中国当代题材电视剧最佳男演员奖 [3] 。2015年参加中国首档明星喜剧竞赛真人秀《欢乐喜剧人第一季》 [4] 。同年11月5日，参加《咱们穿越吧》庆功会。同年12月9日，献唱电影《唐人街探案》推广曲《往事只能回味》。2016年12月13日，献唱电影《东北往事之破马张飞》主题曲《全世界都在说东北话》。
</p>
</div>
</body>
</html>
4. Clear floating
The impact of floating
For standard flow boxes, if the height is not set, it will be automatically raised by the content.
If the elements inside the box are floating, the parent box cannot be raised after the child box is off the label
The height of the parent box will be 0, which will cause some problems
- The height of the parent box cannot be raised by the child element
- If there are other sibling tags behind the parent box, and there is also a floating element inside the sibling tag, the floating in front will affect the pasting
According to the above two problems, it is necessary to arrange a solution to solve the above problems
1. Clear floating method 1: height property
Disadvantage: The height of the parent box cannot increase with the height of the child element. If the child box is dynamic, the parent box will still have the original problem
Use the height property to clear floating effects only for parents and children with fixed heights
2. Clear floating method 2: clear property
CSS has a clear attribute, which specifically removes the impact of floating elements
Attribute value:
left: Clear the effect of the previous left float
right: Clear the effect of the previous right float
both: Clear the influence of all previous floats
clear: both;
The clear property can solve the floating effect of the current box
Disadvantages: The parent box still cannot be raised by the internal elements, and there is a problem with the margin display between the parent boxes
3. Clear floating method three: partition wall method
Method: Use the clear attribute and the height attribute to make a wall to isolate the fathers of the two floating elements
.cl {
clear: both;
height: 10px;
}
<body>
<div class="box">
<p></p>
<p></p>
<p></p>
<p></p>
</div>
<div class="cl"></div>
<div class="box1 ">
<p></p>
<p></p>
<p></p>
<p></p>
</div>
</body>
Disadvantages: The child box still cannot support the height of the parent box
4. Clear floating method four: inner wall method
Method: Evolved from the partition wall method, the wall is placed inside the two affected parent elements, and at the end of all child elements, an inner wall method is set, and the clear attribute is set
.cl {
clear: both;
}
<div class="box">
<p></p>
<p></p>
<p></p>
<p></p>
<div class="cl"></div>
</div>
<div class="box1 ">
<p></p>
<p></p>
<p></p>
<p></p>
<div class="cl"></div>
</div>
Solved all the problems that were affected by floating before
5. Clear floating method five: Pseudo-class (add pseudo-class attributes to all elements affected by floating)
A type of CSS selector (we will learn it later in our CSS3 course)
.clearfix::after {
content: '';
display: block;
height: 0;
clear:both;
visibility: hidden;
}
6. Clear floating method six: overflow attribute (set for parent element)
The overflow property is a small recipe to clear the influence of floating. The value must be hidden, which can solve all the problems of floating.
overflow: hidden;
Use the overflow attribute to solve the reason for the floating effect: the overflow attribute has the BFC feature, and the BFC feature has a feature. The element that is set to this attribute has the feature of being raised by the internal elements.
In actual work, use the inner wall method or the overflow property to solve the impact of floating
5. Floating case
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.outer {
width: 1000px;
height: 96px;
background: #F4F3F2;
margin: 100px auto;
padding: 15px 0;
}
.outer .pic {
width: 290px;
height: 96px;
float: left;
padding-left: 20px;
border-right: 1px solid #D0CDC7;
}
.outer .pic .top{
height: 65px;
}
.outer .pic .top img {
width: 83px;
float: left;
}
.outer .pic .top .t_cont{
float: left;
width: 197px;
padding-left: 10px;
font-size: 14px;
color: #0B335F;
}
.outer .pic .top .t_cont .tit {
line-height: 24px;
}
.outer .pic .top .t_cont .des{
font-size: 12px;
color: #666560;
line-height: 22px;
}
.outer .pic .top .t_cont .tit span{
color: #DA0000;
}
.outer .pic .bottom {
font-size: 14px;
color:#164560;
line-height: 30px;
}
.outer .news {
float: left;
padding-left: 32px;
line-height: 24px;
font-size: 14px;
color:#164560;
}
.outer .news ul {
list-style: none;
}
</style>
</head>
<body>
<div class="outer">
<div class="pic">
<div class="top">
<img src="images/cctvpic1.jpg" alt="">
<div class="t_cont">
<p class="tit">
<span>快看|</span>2019我们一起想她表白
</p>
<p class="des">
新中国70华诞，为祖国母亲而歌。
</p>
</div>
</div>
<div class="bottom">
解放军最新地空导弹车曝光！战力惊人
</div>
</div>
<div class="pic">
<div class="top">
<img src="images/cctvpic2.jpg" alt="">
<div class="t_cont">
<p class="tit">
<span>中国梦实践者|</span>大国工匠 行业先锋 创业圆梦
</p>
</div>
</div>
<div class="bottom">
“家国情怀”是新时代一支强心剂
</div>
</div>
<div class="news">
<ul>
<li>第七届中国网络视听大会</li>
<li>聚焦2019数博会</li>
<li>壮丽70年</li>
<li>2019中国北京世界园艺博览会</li>
</ul>
</div>
</div>
</body>
</html>