Original: itsOli @ front-end 10,000 hours this article was first published in the public number "front-end 10,000 hours" this article belongs to the author, without authorization, please do not reprint! This article is adapted from "sparrow" private pay column "front end | ten thousand hours from zero basis to easily obtain employment"Copy the code


❗ ️ ❗ ️ ❗ ️

The following link is the latest erratum to this articleLet the Box Move: ① Float


1. What are the characteristics of floating elements? What is the impact on the parent container, other floating elements, normal elements, and literals? 2. What does clearing float mean? How do I clear the float? Two or more ways.Copy the code

🙋 on the question “refer to the answer in detail”, please click here to view access!


Preface: In the previous 10 articles, we are basically using “theory” to learn “theory”, then from this article, we try to use “practice” to learn the theory, and then used in practice.

One principle: copy the code to JS Bin, compare the effect to understand the “what”, “why”, “how” of each line of code?


1 Why “Float” is needed

Suppose we need something that is not arranged from top to bottom as defined by the box model, but from left to right, then we need to consider using “floats”.

For example, the head of a website is partially on the left and partially on the right. First of all, we use div for “part,” and div is a block-level element, and it’s supposed to go from top to bottom in a whole row, not in a whole column. That’s when we need to float.


2 how is “float” used, what performance effect does it have

2.1 Can not put the newline

A “float box” moves left or right until its outer edge touches the edge of the containing block or the edge of another float box. If there is not enough horizontal space to float, it will move down until the space is right or there are no more floats.

🔗 source code and effect display HTML

<! DOCTYPEhtml>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Front 10,000 hours</title>
</head>
<body>
  <div class="ct">
    <div class="box box1">1.</div>
    <div class="box box2">2.</div>
    <div class="box box3">3.</div>
  </div>
</body>
</html>
Copy the code

CSS

.ct {
  width: 280px;
  height: 300px;
  margin: 100px;
  border: 1px solid black;
}
.box {
  float: left; /* 🚀 directly add a float attribute to the element you want to float. * /
  width: 100px;
  height: 100px;
  background: red;
  color: #fff;
}

.box1 {
  background: blue;
}
.box2 {
  background: pink;
}
Copy the code

🆚 comparison: 🔗 source code and effect display HTML

<! DOCTYPEhtml>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div class="ct">
    <div class="box box1">1.</div>
    <div class="box box2">2.</div>
    <div class="box box3">3.</div>
  </div>
</body>
</html>
Copy the code

CSS

.ct {
  width: 280px;
  height: 300px;
  margin: 100px;
  border: 1px solid;
}
.box {
  float: right;
  width: 100px;
  height: 100px;
  background: red;
  color: #fff;
}
/* 🚀 from the browser's point of view, it will render next to each other. * /

.box1 {
  background: blue;
}
.box2 {
  background: pink;
}
Copy the code

2.2 Stuck situation

🔗 source code and effect display HTML

<! DOCTYPEhtml>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div class="ct">
    <div class="box box1">1.</div>
    <div class="box box2">2.</div>
    <div class="box box3">3.</div>
  </div>
</body>
</html>
Copy the code

CSS

.ct {
  width: 280px;
  height: 300px;
  border: 1px solid;
  margin: 100px;
}
.box {
  color: #fff;
  width: 100px;
  height: 100px;
  background: red;
  float: left;
}
.box1 {
  background: blue;
  height: 120px;
}
.box2 {
  background: pink;
}

/* Render the document from top to bottom from the perspective of the browser. After rendering 1 and 2, render 3, the right side will not fit, then it will be squeezed down, after squeezing down, it will start to move left near the bottom right side of 2, when it hits the bottom right corner of 1, it will not move, 1 is stuck. So we have a "stuck" problem when we set the height differently. * /
Copy the code

2.3 When floating elements have an intersection with text

🔗 source code and effect display

HTML

<! DOCTYPEhtml>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div class="ct">
    <div class="box box1">1.</div>
    <p>To the edge of the containing block or the outside of another floating box. If row boxes exist, the float box's outer top is aligned with the top of the current row box. If there is not enough horizontal space to float, it will move down until the space is right or there are no more floats.</p>
    <div class="box box2">2.</div>
    <div class="box box3">3.</div>
  </div>
</body>
</html>
Copy the code

CSS

.ct {
  width: 280px;
  height: 300px;
  margin: 100px;
  border: 1px solid black;
}
.box {
  float: left;
  width: 100px;
  height: 100px;
  background: red;
  color: #fff;
}
.box1 {
  width: 140px;
  height: 120px;
  background: blue;
}
.box2 {
  background: pink;
}
Copy the code

🏆 : an element in a normal stream, if not set to position and float, will be obscured by the float element when it is with the float element.

💡 further verification: 🔗 source code and effect display

HTML

<! DOCTYPEhtml>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div class="ct">
    <div class="box box1">1.</div>
    <p>To the edge of the containing block or the outside of another floating box. If row boxes exist, the float box's outer top is aligned with the top of the current row box. If there is not enough horizontal space to float, it will move down until the space is right or there are no more floats.</p>
    <div class="box box2">2.</div>
    <div class="box box3">3.</div>
  </div>
</body>
</html>
Copy the code

CSS

.ct {
  width: 280px;
  height: 300px;
  margin: 100px;
  border: 1px solid;
}
.box {
  float: left;
  width: 100px;
  height: 100px;
  background: red;
}
.box1 {
  width: 140px;
  height: 120px;
  background: blue;
  opacity: 0.5; /* 🚀 set transparency to observe */
}
.box2 {
  background: pink;
}

/* 🚀 But the text inside is not covered by the floating element, so it presents the effect that the floating element is invisible to the paragraph p, while the text is visible and arranged around the floating element. * /
/* 🚀 displays a rule that when a normal element encounters a floating element, the floating element is invisible to the normal element, but text within the normal element is visible to the floating element. * /
Copy the code

2.4 Floating elements are detached from the normal flow

Out-of-normal flow means that its parent container cannot find floating elements when calculating the width and height. That is, the parent container is not propped open by floating elements inside;

❗️ Note: Not the same as Absolute.

🔗 source code and effect display HTML

<! DOCTYPEhtml>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Front 10,000 hours</title>
</head>
<body>
  <div class="ct">
    <div class="box box1">1.</div>
    <div class="box box2">② Block box can't see floating box1, but I am text I can see!</div>
    <div class="box box3">3.</div>
  </div>
</body>
</html>
Copy the code

CSS

.ct {
  width: 280px;
  height: 300px;
  margin: 100px;
  border: 1px solid;
}
.box {
  width: 100px;
  height: 100px;
  background: red;
  color: #fff;
}
.box1 {
  float: left;
  background: blue;
  opacity: 0.6;
}
.box2 {
  width: 110px;
  height: 110px;
  background: pink;
}
Copy the code

2.5 Block-level element float width shrinks, and inline element float is rendered as block-level feature

🔗 source code and effect display HTML

<! DOCTYPEhtml>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div class="box">This is a div</div>
  <span>This is a span</span>
</body>
</html>
Copy the code

CSS

.box {
  float: left;
  color: #fff;
  background: red;
}
span {
  float: left;
  width: 100px;
  height: 50px;
  margin: 10px;
  color: #fff;
  background: blue;
} 

/* 🚀 after the block level element is set to float, it takes on the feel of inline-block and its width shrinks. * /
/* 🚀 when the inline element is set to float, it takes on the block-level properties and has the feel of inline-block. This changes the inline element to be able to set width, height, margin, etc., but not to be centered. * /
Copy the code


3 Floating scenarios

3.1 Two-column layout (fixed width on the left, adaptive on the right; Fixed width on the right, adaptive on the left)

🔗 source code and effect display – fixed width on the left, adaptive HTML on the right

<! DOCTYPEhtml>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div class="aside">The sidebar is fixed in width</div>
  <div class="main">Content block adaptive width</div>
</body>
</html>
Copy the code

CSS

.aside {
  float: left;
  width: 150px;
  height: 400px;
  color: #fff;
  background: red;
  
}
.main {
  height: 500px;
  margin-left: 160px; /* 🚀 indicates the left side of the 160px range. * /
  color: #fff;
  background: blue; 
}
Copy the code

🆚 comparison (fixed width on the right, adaptive on the left) : 🔗 source code and effect display

HTML

<! DOCTYPEhtml>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Front 10,000 hours</title>
</head>
<body>
  <div class="aside">The sidebar is fixed in width</div>
  <div class="main">Content block adaptive width</div>
</body>
</html>
Copy the code

CSS

.aside {
  float: right;
  width: 150px;
  height: 400px;
  color: #fff;
  background: red; 
}
.main {
  margin-right: 160px;
  /* 🚀 means I don't need to use the 160px range */
  
  height: 500px;
  color: #fff;
  background: blue;
  
}
Copy the code

3.2 Three-column Layout — Fixed width on both sides, adaptive in the middle

🔗 source code and effect display HTML

<! DOCTYPEhtml>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Front 10,000 hours</title>
</head>
<body>
  <div class="menu">The sidebar is fixed in width</div>
  <div class="aside">The sidebar is fixed in width</div>
  <div class="main">Content block adaptive width</div>
</body>
</html>
Copy the code

CSS

.menu {
  float: left;
  width: 150px;
  height: 400px;
  color: #fff;
  background: red;
}
.aside { 
  float: right;
  width: 150px;
  height: 400px;
  color: #fff;
  background: red;
}
.main {
  height: 500px;
  margin-right: 160px;
  margin-left: 160px;
  /* 🚀 + left/right margin */
  
  color: #fff;
  background: blue;
  
}
Copy the code

❗️ if the order of menu aside main in HTML is changed: 🔗 source code and effect display

HTML

<div class="menu">The sidebar is fixed in width</div>
<div class="main">Content block adaptive width</div>
<div class="aside">The sidebar is fixed in width</div>

<! If you change the order, the rest of it should skip and go down. Reason: Suppose I am a browser and I need to draw the corresponding image against the HTML. First draw menu and float left with its style. But here we have main, which is a block-level element that takes up an entire row; The rest of the way aside would only flow down and to the right based on main. -->
Copy the code

CSS

.menu {
  float: left;
  width: 150px;
  height: 400px;
  color: #fff;
  background: red;
}
.aside { 
  float: right;
  width: 150px;
  height: 400px;
  color: #fff;
  background: red;
  
}

.main {
  height: 500px;
  margin-right: 160px;
  margin-left: 160px;
  /* add left/right margin */
  
  color: #fff;
  background: blue;
  
}
Copy the code

3.3 Using floating to Achieve “Navigation Bar”

3.3.1 Navigation Bar is left

🔗 source code and effect display HTML

<! DOCTYPEhtml>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <ul class="navbar">
    <li><a href="#">(1) home page</a></li>
    <li><a href="#">(2) the product</a></li>
    <li><a href="#">(3) service</a></li>
    <li><a href="#">(4) on</a></li>
  </ul>
</body>
</html>
Copy the code

CSS

.navbar {
  list-style: none;
}
.navbar>li {
  float: left;
  margin-left: 15px;
}

/* 🚀 we can also use inline-block, but we need to pay attention to different issues. With inline-block we need to pay attention to its gaps. * /
Copy the code

3.3.2 Navigation Bar is on the right

🔗 source code and effect display HTML

<! DOCTYPEhtml>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Front 10,000 hours</title>
</head>
<body>
  <ul class="navbar">
    <li><a href="#">(1) home page</a></li>
    <li><a href="#">(2) the product</a></li>
    <li><a href="#">(3) service</a></li>
    <li><a href="#">(4) on</a></li>
  </ul>
</body>
</html>
Copy the code

CSS

.navbar {
  float: right;
  /* 🚀 float ul whole right */

  list-style: none;
}
.navbar>li {
  float: left;
  /* 🚀 */

  margin-left: 15px;
}
Copy the code

🆚 comparison: 🔗 source code and effect display HTML

<! DOCTYPEhtml>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Front 10,000 hours</title>
</head>
<body>
  <ul class="navbar">
    <li><a href="#">(1) home page</a></li>
    <li><a href="#">(2) the product</a></li>
    <li><a href="#">(3) service</a></li>
    <li><a href="#">(4) on</a></li>
  </ul>
</body>
</html>
Copy the code

CSS

.navbar {
  list-style: none;
}
.navbar>li {
  float: right;
  /* 🚀 does not work here, because from the browser's point of view the rendering is done in document order. * /

  margin-left: 15px;
}
Copy the code


4 Clearing Float

4.1 Why do I want to clear floats

Because everything has two sides.

4.1.1 First, floating affects the position of subsequent elements (during rendering, block elements are invisible, but text inside them is visible)

🔗 source code and effect display HTML

<div id="content">
  <div class="menu">The sidebar is fixed in width</div>
  <div class="aside">The sidebar is fixed in width</div>
  <div class="main">Content block adaptive width</div>
</div>
<div id="footer">I'm a footer, but there's something wrong with my style!</div>
Copy the code

CSS

.menu {
  float: left;
  width: 150px;
  height: 300px;
  color: #fff;
  background: red;
}
.aside { 
  float: right;
  width: 150px;
  height: 300px;
  color: #fff;
  background: red;
}
.main {
  height: 200px;
  margin-right: 160px;
  margin-left: 160px;
  color: #fff;
  background: blue;
  
}
#footer {
  color: #fff;
  background: grey;
}
Copy the code

4.1.2 Second, there is a problem in calculating the height of the parent container

🔗 source code and effect display HTML

<! DOCTYPEhtml>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Front 10,000 hours</title>
</head>
<body>
  <ul class="navbar">
    <li><a href="#">(1) home page</a></li>
    <li><a href="#">(2) the product</a></li>
    <li><a href="#">(3) service</a></li>
    <li><a href="#">(4) on</a></li>
  </ul>
</body>
</html>
Copy the code

CSS

.navbar {
  list-style: none;
  border: 1px solid #ccc;
  /* Add a background color and no effect: background: pink; * /

}
.navbar>li {
  float: left;
  margin-left: 15px;
}


/* 🚀 The floating element is invisible to its parent element because it is separated from the document stream. Here for Navbar, he thinks there's nothing in there to prop it up, because li has already floated, so there's nothing to prop it up, so it thinks the height is zero. * /
Copy the code

4.2 How to Clear floating information

4.2.1 Principles and methods of clearing floating implementation

🔗 source code and effect display HTML

<ul class="navbar">
  <li><a href="#">(1) home page</a></li>
  <li><a href="#">(2) the product</a></li>
  <li><a href="#">(3) service</a></li>
  <li><a href="#">(4) on</a></li>
  
  <li class="clear"></li>
  <! 🚀 To solve this problem, require the source document to have an unfloated element, the normal element. --> 

</ul>
Copy the code

CSS

.navbar {
  list-style: none;
  border: 1px solid #ccc;
}
.navbar>li {
  float: left;
  margin-left: 15px;
}

.navbar .clear {
  float: none;
  clear: left;
}
/* 🚀 struts the parent container by clearing the float to get a normal element. * /
Copy the code

  • Clear float clear: left; This clear can be used on any element, whether you are floating or not. Require the box’s top and border edges to be below the bottom of all left float boxes formed by elements prior to this in the source document (that is, in the HTML document structure) (if there is no left float box, there is no point in clearing the left float).

  • Clear float clear: right; The top border of the box is required to be outside the bottom of all right float boxes formed by the preceding elements in the source document.

  • Clear float clear: both; Whenever there is a floating element in front of the box in the source document, it is below the floating element.

1. 🆚 contrast

We used a li to materialize ordinary elements, so can we have a simpler method — pseudo-elements (one of the functions of pseudo-elements is to replace tags). 🔗 source code and effect display

HTML

<ul class="navbar">
  <li><a href="#">(1) home page</a></li>
  <li><a href="#">(2) the product</a></li>
  <li><a href="#">(3) service</a></li>
  <li><a href="#">(4) on</a></li>
</ul>
Copy the code

CSS

.navbar {
  list-style: none;
  border: 1px solid #ccc;
}
.navbar>li {
  float: left;
  margin-left: 15px;
}

.navbar::after {
  content: "";
  /* 🚀 writes an element, you must have content. * /

  display: block;
  /* 🚀 note that this would not work without the block, since after is just an anonymous line box, i.e., a string. But it has to be a block-level element for it to go down. * /

  clear: both;
}
/* 🚀 : I generated a block element at the end of the source navbar, and then cleared the float, it would be below the float box, thus supporting the parent navbar. * /
Copy the code

2. 🆚

🔗 source code and effect display for commonality, we often.clearfix::after; — to fix the float problem.

HTML

<ul class="navbar clearfix">
<! -- 🚀 Any need to clear the float we can add a this style can be universal! -->

  <li><a href="#">(1) home page</a></li>
  <li><a href="#">(2) the product</a></li>
  <li><a href="#">(3) service</a></li>
  <li><a href="#">(4) on</a></li>
</ul>
Copy the code

CSS

.navbar {
  list-style: none;
  border: 1px solid #ccc;
}
.navbar>li {
  float: left;
  margin-left: 15px;
}

.clearfix::after {
  /* 🚀 For versatility, we directly clearfix. Then in the HTML document, where you want to clear the float, you just add the class name to it. * /

  content: "";
  display: block;
  clear: both;
}
Copy the code

4.2.2 Solve the above problems caused by “floating”

🔗 source code and effect display HTML

<div id="content" class="clearfix">
<! 🚀 means that there is an element below the three elements, and this element will be below the three elements, thus expanding the content. -->

  <div class="menu">The sidebar is fixed in width</div>
  <div class="aside">The sidebar is fixed in width</div>
  <div class="main">Content block adaptive width</div>
</div>
<div id="footer">I'm a footer, but there's something wrong with my style!</div>
Copy the code

CSS

.menu {
  float: left;
  width: 150px;
  height: 300px;
  color: #fff;
  background: red; 
}
.aside { 
  float: right;
  width: 150px;
  height: 300px;
  color: #fff;
  background: red;
  
}
.main {
  height: 200px;
  margin-right: 160px;
  margin-left: 160px;
  color: #fff;
  background: blue; 
}
#footer {
  color: #fff;
  background: grey;
}


.clearfix::after {
  /* 🚀 For generality, we just clearfix, and then in the HTML document, where we need to clear the float, just add the class name to it. * /

  content: "";
  display: block;
  clear: both;
}
Copy the code

🏆 Summary: So in the future we want to achieve a horizontal layout, there are two methods:

  • First, inline-block — no need to clear float, simple, easier to center, and suitable for horizontal arrangement of elements with few children. But pay attention to gap problems, and alignment (upper alignment);

  • Second, float — no gap problems, suitable for slightly larger layouts. But the problem that needs to be solved is a lot of problems caused by the fact that the parent element will not be stretched.


Float and negative margin

Two floating elements, if one of them moves down due to the lack of space, move the element up by setting a negative margin greater than its own width. 🔗 source code and effect display

HTML

<div class="container">
  <div class="box box1">box1</div>
  <div class="box box2">box2</div>
</div>
Copy the code

CSS

* {
  margin: 0
}
.container {
  width: 400px;
  height: 400px;
  border: 1px solid red;
}
.box1 {
  float: left;
  width: 300px;
  height: 100px;
  background: pink;
}
.box2 {
  float: left;
  width: 110px;
  height: 100px;
  margin-left: -10px;  
  /* 🚀 the browser calculates the width by subtracting this 10, and then you get 100, which is exactly where you put it. * /
  
  background-color: red;
}
Copy the code


Postscript: Next we’ll discuss how positioning, as opposed to floating, makes the box move. Subsequent articles are a top priority, and every one of them is full of good stuff!

I wish you good, QdyWXS ♥ you!