floating

Floating is introduced

Float is a very important property in web layout. So the float property was originally designed for the text surround effect of the web page, as shown in the figure:

If we use the content explained before, to achieve the above display effect, it is very difficult to achieve!!

If you want to display two divs in a row, you can set them to inline-block. If you want to display two divs in a row, you can set them to inline-block. If you want to display two divs in a row, you can set them to inline-block.

Okay, student, if you can think of this, you understand the point fairly well, but then again, you’ll find that if you use the effect you just showed it, as shown here:

How big is this gap? If we calculate the width of the whole box model in a row, can we calculate it accurately? So, what you’re imagining is wrong.

Summary: If you want to implement layout on a web page, such as the display of the corresponding tag elements within a line, you can use the float attribute. Float allows for side-by-side elements.

The float property

Float: CSS stylesheets are represented by float, which has

Attribute values describe
none Does not float. All of the HTML tags described earlier do not float by default
left Left floating
right Right float
inherit Inherits the float property of the parent element

Take a look:

<! DOCTYPEhtml>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Float property Usage</title>
	<style type="text/css">
		.left{
			width: 200px;
			height: 200px;
			background-color: red;
			color: #fff;
            /* Left float */
             float:left;
			
		}
		.right{
			width: 200px;
			height: 200px;
			background-color: green;
			color: #fff;
            /* Float right */
             float:right;
		}
		

	</style>
</head>
<body>
	<div class="left">The box on the left</div>
	<div class="right">The box on the right</div>
</body>
</html>
Copy the code

Observation. The left box is contracted and leans to the left. .Right also has contraction, lean to the right.

Effect simulation display:

Floating phenomenon

We said earlier that the float was designed to do a “text wrap effect”. So let’s see what happens if we float the box.

  • Floating elements are detached from the standard document flow, i.eTake off the mark
  • Floating elements cling to each other
  • Floating elements create a “word wrap” effect
  • Floating elements shrink

Standard document flow

Document flow refers to the way elements are automatically arranged from left to back and from top to bottom by default.

The browser’s default HTML layout, without any control over the layout of the page, runs from left to right and from top to bottom, a bit like a flow, called a flow layout.

Take off the mark

Here’s an example:

<! DOCTYPEhtml>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Take off the mark</title>
	<style type="text/css">
		.box1{
			width: 200px;
			height: 200px;
			background-color: red;
			float: left;
			color: #fff;
		}
		.box2{
			width: 400px;
			height: 400px;
			background-color: green;
			color: #fff;

		}
	</style>
</head>
<body>
	<div class="box1">Left tsing lung</div>
	<div class="box2">The right white tiger</div>
</body>
</html>
Copy the code

Effect:

You’ll find that the red box is covering the yellow one. Why does this happen?

Because: in the standard document down, left and right white tiger is typesetting fluctuation two boxes, if the float is set to left tsing lung, the box will be out of the standard document flow, it is not in accordance with the default streaming typesetting layout, can think the left tsing lung float box, not bound by standard document flow typesetting layout. Then the browser thinks the right white tiger box is the first box that flows down the standard document. So the right white tiger is rendered to the first position on the page.

Float elements close

See chestnuts:

<! DOCTYPEhtml>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Float elements close</title>
	<style type="text/css">
		.box1{
			width: 100px;
			height: 450px;
			background-color: red;
			float: left;
		}
		.box2{
			width: 200px;
			height: 250px;
			background-color: green;
			float: left;
		}
		.box3{
			width: 300px;
			height: 300px;
			background-color: blue;
			float: left;
		}

	</style>
</head>
<body>
	<div class="box1"></div>
	<div class="box2"></div>
	<div class="box3"></div>

	
</body>
</html>
Copy the code

Effect display:

Summary: When an element floats, it is moved out of the normal document flow, and then shifted left or right until it hits the border of the container, or another floating element

Word confining effect

Word circumference effect before we explain, not an explanation

Contraction effect

As shown in the figure:

The code is as follows:

<! DOCTYPEhtml>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Contraction effect</title>
	<style type="text/css">
		.box1{
			float: left;
			background-color: red;
		}
	</style>
</head>
<body>
	<div class="box1">I have a contraction function</div>
</body>
</html>
Copy the code

Box1 boxes occupy the entire row before the float is set. Once the float is set, the width of the box is the width of the content.

Floating destructiveness

Take a look:

<! DOCTYPEhtml>
<html>
<head>
	<meta charset="utf-8">
	<title>Floating element destructiveness</title>
	<style type="text/css">
		.father{
			border: 1px solid red;
		}
		.child{
			width: 200px;
			height: 200px;
			float: left;
			background-color: green;
		}
	</style>
</head>
<body>
	<div class="father">
		<div class="child">son</div>
	</div>

</body>
</html>
Copy the code

Before and after floating effect display:

It can be seen that after floating, the blue box cannot support the height of the parent box because it is separated from the standard document flow, causing the height of the parent box to collapse. If this problem occurs in a web page, it can cause the layout of our entire web page to be out of whack. We must solve the problem of the height collapse of the parent box.

Conclusion: Floating can achieve the layout of the web page, but it will also bring some problems to the web page (the height of the parent box collapse), as long as we solve the problem of floating to the web page, we can carry out efficient layout of the web page. I’ll see you in the next video.

The way to clear the float

Last time, we learned that floating can be destructive and can cause the parent box to collapse in height, resulting in page clutter. There are four solutions to floating in CSS layouts:

  • The parent box sets a fixed height
  • Interior wall method
  • Pseudo element elimination
  • overflow:hidden

The parent box sets a fixed height

The code is as follows:

<! DOCTYPEhtml>
<html>
<head>
	<meta charset="utf-8">
	<title>Floating element destructiveness</title>
	<style type="text/css">
		.father{
            /* The parent box is set to a fixed height */
			height: 200px;
			border: 1px solid red;
		}
		.child{
			width: 200px;
			height: 200px;
			float: left;
			background-color: green;
		}
	</style>
</head>
<body>
	<div class="father">
		<div class="child">son</div>
	</div>

</body>
</html>
Copy the code

Although setting a fixed height for the parent box temporarily solved our problem, it was not flexible to use, and we would have to manually change the height of the parent box if the height requirements of the child box changed in the future (multiple places on the page). It is not easy to maintain.

Application: Fixed height areas of a web page, such as fixed navigation bar.

Disadvantages: inflexible use, not easy to maintain later

Interior wall method

The inner wall method has a rule that follows the floating element with an empty block-level element (usually div) set to clear:both; Properties.

The clear property, which literally means clear, and both, which means clear floating elements on my left and right sides.

The code is as follows:

<! DOCTYPEhtml>
<html>
<head>
	<meta charset="utf-8">
	<title>Floating element destructiveness</title>
	<style type="text/css">
		.father{
			
			border: 1px solid red;
		}
		.child{
			width: 200px;
			height: 200px;
			float: left;
			background-color: green;
		}
		.clearfix{
			clear: both;
		}
	</style>
</head>
<body>
	<div class="father">
		<div class="child">son</div>
		<div class="clearfix"></div>
	</div>

</body>
</html>
Copy the code

Application: there are not many applications in the web page, explain this, just to guide the next way to clear the float, that is our focus to master.

Disadvantages: Redundant structure

Pseudo element elimination

For the inner wall method, add an empty block-level element (usually div) after the float element and set it to clear:both; Properties. So it just so happens that in cSS3’s attribute usage there’s a selector that fits perfectly into this usage, the pseudo-element selector.

The pseudo-element selector is simple. Like pseudo-classes, pseudo-elements add selectors, but instead of describing a particular state, they allow you to style certain parts of the element. Only one will be introduced here.

Grammar:

p::after{
    /*p::after{} must have content. Add */ to the last part inside the p element
    content:'... '
}
Copy the code

Adds the style to the end of the P tag element. Yi… , in… Add style after z of. This just conforms to our use of inner wall method.

The code is as follows:

<! DOCTYPEhtml>
<html>
<head>
	<meta charset="utf-8">
	<title>Floating element destructiveness</title>
	<style type="text/css">
		.father{
			border: 1px solid red;
		}
		.child{
			width: 200px;
			height: 200px;
			float: left;
			background-color: green;
		}
		.cleafix:after{
			content:'. ';
			display: block;
			clear: both;
			overflow: hidden;
			height: 0;
		}
		
	</style>
</head>
<body>
	<div class="father clearfix">
		<div class="child">son</div>
	</div>

</body>
</html>
Copy the code

Explain the pseudo-element elimination method written one by one:

.clearfix:after{
    content:'. ';
    display: block;
    clear: both;
    overflow: hidden;
    height: 0;
}
Copy the code
  • content:'.';Said to.clearfixThe last content added inside the element is the inline element.
  • display:block;Set this element to a block-level element, as required by the interior wall method.
  • The clear: both;Method to clear the float. Must want to write
  • overflow:hidden; height:0;If you usedisplay:none;, the element cannot be a block-level element.overflow:hidden;Represents the hidden element, anddisplay:none;The difference is that the former hides the element, which takes place, while the latter does not.

overflow:hidden

The CSS property overflow defines what to do when the content of an element is too big to fit in the box. It is a shorthand attribute for overflow-x and overflow-y

Attribute values describe
visible The default value. Content is not pruned and is rendered outside the element box
hidden The content is trimmed and the rest of the content is not visible
scroll The content is trimmed and the browser displays a scroll bar to view the rest of the content
auto At the browser’s discretion, if the content is pruned, a scroll bar is displayed
inherit Specifies that the overflow property value is inherited from the parent element

Code demo to see the effect respectively:

<! DOCTYPEhtml>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Usage of overflow attributes</title>
	<style type="text/css">
		.box{
			width: 300px;
			height: 300px;
			border: 1px solid red;
			overflow: hidden;
		}
	</style>
</head>
<body>
	<div class="box">After my father became a leader, he never dared to speak much for fear of bringing pressure to others. Last month, subordinate Xiao Li uncle came to my home to play, my father casually said: "there is no air conditioning in the home, relatively hot, I laugh." The next day, uncle Li took the master to my home installed 5 pieces of big air conditioning! He won't take money for anything. Last week, father saw uncle Zhang having lunch in his office. Among the dishes were fried fish, he casually said, "Ouch, it's delicious!" That evening, uncle Zhang sent a box of fresh fish to my house. One night, I went for a walk with my father. On the way, I met uncle Wang and his daughter-in-law, and my father complimented her casually: "Oh, Xiao Wang, your daughter-in-law is really beautiful!" The next night, when my mother was out, she heard a knock at the door. When he opened the door, Uncle Wang's daughter-in-law stood at the door and smiled to see his father and said, "The leader, our brother wang said his sister-in-law was not at home, so he asked me to accompany you!" It's great to be a leader. No wonder so many people like it!</div>
</body>
</html>
Copy the code

Effect display:

Scrolling effect

Set the overflow: scroll; .

Effect display:

Overflow attributes not only above effect, so when an element set the overflow: hidden | auto | scroll properties, it can form a landing area, we called it a category block formatting context. The BFC is just a rule. Both are important for float positioning. Float location and clear float are only applied to elements of the same BFC.

Floats do not affect the layout of elements in other BFC, and clearing floats only clears floats of elements before it in the same BFC.

Summary: As long as we let the parent box form the region of the BFC, it will remove the influence of floating elements in the region.

The code is as follows:

<! DOCTYPEhtml>
<html>
<head>
	<meta charset="utf-8">
	<title>Floating element destructiveness</title>
	<style type="text/css">
		.father{
			overflow: hidden;
			border: 1px solid red;
		}
		.child{
			width: 200px;
			height: 200px;
			float: left;
			background-color: green;
		}
		
	</style>
</head>
<body>
	<div class="father">
		<div class="child">son</div>
	</div>

</body>
</html>
Copy the code

In-depth understanding of BFC

Understand Box and Formatting Context before understanding BFC

(1) A BOX B) a BOX C) a BOX D) a BOX Boxes are inline, block, and inline-block

(2) FC: Formatting Context is a concept in W3C specifications. It is a rendering area of the page with a set of rendering rules that determine how its children will be positioned and how they will interact with other elements.

Common Formatting contexts include Block fomatting Context (BFC) and Inline Formatting Context (IFC).

Landing the definition

Block formatting context (BFC). It is a separate rendering area, with only block-level box participation, which dictates how the internal block-level box is laid out and has nothing to do with the outside of the area.

BFC layout rules

1. The internal boxes will be placed one by one in the vertical direction. 2. The vertical distance of the Box is determined by margin. The margins of two adjacent boxes belonging to the same BFC will overlap 3. The left side of the margin box of each element touches the left side of the border box containing the block (for left-to-right formatting, otherwise the opposite). This is true even if there is a float. 4. The region of the BFC does not overlap with float elements. 5. A BFC is a separate container on a page, and the child elements in the container do not affect the outside elements. And vice versa. 6. When calculating the height of the BFC, the floating element also participates in the calculationCopy the code

Those elements will generate the BFC

1.The root element2.The float property is not None3.Position is absolute or fixed4.The display of the inline - block5.The overflow is not visibleCopy the code

3. The positioning

Positioning is a fairly complex topic, but before we dive into it, let’s talk about the layout that flowed from our standard documentation.

First of all,

  • The box model, the width, padding, border, and margin of the element
  • Classification of elements: differences between block-level elements, inline elements, and inline block elements.
  • Margin of box model, vertical direction will appear margin merge problem

Well, the whole idea of positioning is to allow us to override the behavior of the basic standard document flow described above to produce interesting effects.

Here’s a vision. What if you want to slightly change the placement of some boxes in your layout so that their default layout flow position feels a little weird and uncomfortable? Location is your tool. Or if you want to create a UI element that floats on top of the rest of the page and/or always stays in the same place within the browser window, no matter how much the page scrolls? Positioning makes this kind of layout work possible.

There are many different types of positions that you can apply to HTML elements. To position an element, we use the position property.

The CSS Position property is used to specify how an element is positioned in a document. The top, right, bottom, and left attributes determine the final position of the element.

Attribute values describe
static The default. Static positioningSpecifies that the element uses the normal layout behavior, that is, the current layout position of the element in the general flow of the document. At this timetop.right.bottom.left 和 z-index Attribute is invalid.
relative Relative positioning. The element is placed where it was when it was unpositioned, and the position of the element is adjusted without changing the layout of the page (thus leaving the element blank where it was when it was unpositioned)
absolute Absolute positioning. No space is reserved for an element, which is positioned by specifying the element’s offset relative to the nearest non-static positioned ancestor element. Absolutely positioned elements can be set to margins and won’t merge with other margins
fixed Fixed position. Instead of reserving space for elements, they are positioned by specifying their position relative to the screen viewport. The position of the element does not change as the screen scrolls

Static positioning

Statically positioned means “where the element defaults to show the document flow.” Nothing has changed.

Code demo:

<! DOCTYPEhtml>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Static positioning</title>
	<style type="text/css">
		.positioned{
			position: static;
			background-color: red;
		}
	</style>
</head>
<body>
	<p class="positioned">I'm a statically positioned element</p>
	
</body>
</html>
Copy the code

Effect display:

Relative positioning

A relatively positioned element is an offset from its normal position in the document, but does not affect the offset of other elements.

Here’s an example:

<! DOCTYPEhtml>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Relative positioning</title>
	<style type="text/css">
		div{
			width: 200px;
			height: 300px;
		}
		.box1{
			background-color: red;
		}
		.box2{
			position: relative;
			top: 30px;
			left: 40px;
			background-color: green;
		}
		.box3{
			background-color: blue;
		}
	</style>
</head>
<body>
	<div class="box1">Box 1</div>
	<div class="box2">Box 2</div>
	<div class="box3">Box 3</div>
</body>
</html>
Copy the code

Effect display:

Oh, cool, huh? Well this is probably not what you expected — why did it move to the bottom and right, didn’t we specify the top and left? It sounds illogical, but that’s just the way relative positioning works — you need to consider an invisible force that pushes on one side of the positioning box, moving it in the opposite direction. So, if you make top:30px; Push the top of the box in one place so that it moves down 30px.

In fact, we have to find a reference position, and then positioning, so the relative positioning is their original position for positioning.

Conclusion:

Reference point

To position the element in its original position, you can offset the element with top,left,right, and bottom

The phenomenon of

  1. Do not deviate from the standard document flow, separately set the box after relative positioning, if not usedtop,left,right,bottomOffset the elements, and it’s no different than a normal box.
  2. There is a gland phenomenon. withtop,left,right,bottomAfter an element is offset, elements that are obviously positioned have a higher hierarchy than elements that are not positioned

application

Relative positioning of the box, generally used for child and parent layout pattern reference. See you in the next video

Absolute positioning

Relatively positioned elements do not depart from the standard document flow, while absolutely positioned elements depart from the document flow. In standard document flow, if a box is set to absolute positioning, the element does not take up space. And the absolute positioning element is positioned relative to the nearest non-static ancestor element. When such an ancestor element does not exist, it is positioned relative to the top left corner of the root element page.

Here’s an example:

<! DOCTYPEhtml>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Absolute positioning</title>
	<style type="text/css">
		div{
			width: 200px;
			height: 300px;
			border: 3px solid #ff6700;
		}
		.box1{
			position: absolute;
			left: 50px;
			background-color: red;
		}
		.box2{
			background-color: green;
		}
		.box3{
			background-color: blue;
		}
	</style>
</head>
<body>
	<div class="box1">One</div>
	<div class="box2">Two</div>
	<div class="box3">Three</div>
</body>
</html>
Copy the code

Effect display:

An absolutely positioned element is positioned relative to the nearest non-static ancestor element. Give me an example

<! DOCTYPEhtml>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Relative positioning</title>
	<style type="text/css">
		body{
			border: 1px solid # 000;
		}
		.grandfather{
			position: relative;
			border: 3px solid #237D7C;
		}
		.father{
			position: relative;
			top: 50px;
			left: 50px;
			border: 3px solid purple;
		}
		.box1..box2..box3{
			width: 200px;
			height: 300px;
			border: 3px solid #ff6700;
		}
		.box1{
			position: absolute;
			left: 50px;
			background-color: red;
		}
		.box2{
			background-color: green;
		}
		.box3{
			background-color: blue;
		}
	</style>
</head>
<body>
	<div class="grandfather">
		<div class="father">
			<div class="box1">One</div>
			<div class="box2">Two</div>
			<div class="box3">Three</div>
		</div>
	</div>
</body>
</html>
Copy the code

Effect display:

An absolutely positioned box is positioned with the parent element of the last non-static positioned element, to demonstrate this effect. The structure of the page has been increased, and the position of the top left corner of the body page has been distinguished. The parent element in the purple border has been adjusted, and the. Father and. Grandfather elements have been positioned relative to each other at the same time. To accomplish this effect.

Conclusion:

Reference point

If there is no non-static ancestor element, it is positioned in the upper left corner of the page, relative to the nearest non-static ancestor element.

The phenomenon of

  1. Out of the standard document flow and out of place on the page
  2. Level up, do web page gland effect

application

Common layout scheme in web pages: the child must parent phase.

Note: Both children and children use the nearest non-static parent element as a reference point. The father must son must, son must father solid, no practical significance, the layout of the site will not appear when the father must son must.

Because absolute positioning deviates from the standard flow, it affects the layout of the page.

On the contrary, the parent phase must be in our page layout, is a common layout scheme. Because the parent sets the relative orientation and does not deviate from the standard flow, the child sets the absolute orientation and simply adjusts the position of the element within the current parent element.

Fixed position

It is basically similar to absolute positioning, with one major difference: the absolute positioning fixed element is relative to the HTML root element or its nearest positioning ancestor, whereas the fixed positioning fixed element is relative to the browser viewport itself. This means you can create fixed and useful web effects, such as fixed navigation bars, back to top buttons, small ads, etc.

Let’s give an example of what this means.

html:

<div class="outer">
    <p>A woman bought a dress for $1000. I doubt it's a little expensive. She said, "Expensive? I'm telling you, the original price of this dress was $2,000, but if I take it 50% off, it's half off. That's like I made $1,000! I'm spending $1,000, but I'm getting $1,000 back, so it's like a free dress. You don't know shit!" I was struck dumb by her economic mathematical mind for a long time...</p>
    <p>The country has fully relaxed the policy of giving birth to two children, a female civil servant surnamed Zhang in some organs finally pregnant two children a few days ago, once again upgraded to be a mother. The husband let her hurriedly say with the leadership, strive to reduce the workload, good fetal protection. Lunch, she happened to meet the leadership in the dining room, difficult to hide the excitement of a face report: "chief, I just conceived a small 2"! There was a sudden silence. The leadership blankly along while return to god, suppress out 1: "did your husband know?" "He told me to find you," she replied. Instant silence in the canteen! Omit 5000 words here!! Omit 5000 words here!! Omit 5000 words here!! Omit 5000 words here!! Omit 5000 words here!! Omit 5000 words here!! Omit 5000 words here!! Omit 5000 words here!! Omit 5000 words here!! Omit 5000 words here!! Omit 5000 words here!! Omit 5000 words here!! Omit 5000 words here!!</p>
    <div class="box" id="one">One</div>
</div>
Copy the code

css:

.box {
    background: red;
    width: 100px;
    height: 100px;
    margin: 20px;
    color: white;
}
#one {
    position: fixed;
    top: 80px;
    left: 10px;
}
.outer {
    width: 500px;
    height: 300px;
    overflow: scroll;
    padding-left: 150px;
}
Copy the code

Effect display: