Float out of the text stream, but why the text will have the effect of wrapping, this is really magical, and then went to ask the craftsman:
The Normal flow is the way this elements are displayed in a Web page in most circumstances. All elements in HTML are inside boxes which are either the inline or block boxes.
Float is actually out of the regular stream, of course, it is certainly not understood, let's take a look at an example:
<! DOCTYPE html>
<meta charset= "Utf-8" >
<title> Text Wrapping </title>
<style type= "Text/css" >
HTML, Body {
margin:0 Auto;
padding:0;
}
. container {
width:300px;
}
div {
Box-sizing:border-box;
}
IMG {
Float:left;
}
. div1 {
border: #c2ffaa 2px solid;
height:50px;
width:20px;
Float:left;
}
. div2 {
border: #e7a6b2 2px solid;
height:50px;
width:70px;
}
. div3 {
border: #a2c5e2 2px solid;
height:50px;
width:20px;
}
</style>
<body>
<div class= "Container" >
<!--
<p> It is a piece of text, this is Chinese, this is English,hello world, Hello sky....</p>-->
<div class= "Div1" ></div>
<div class= "Div2" >1</div>
<div class= "Div3" ></div>
</div>
</body>
Well, obviously, there's an effect that seems to cover, actually, this is determined by the render order:
A float can overlap other boxes of the normal flow (e.g., when a normal flow box next to a float has negative margins). When this is happens, floats are rendered in front to non-positioned In-flow, blocks but behind.
If a float element is overwritten with an element in a regular stream, the float element is rendered before the block-level element that is positioned with position.
Look, and position and the relationship, and position also decided to render order, immediately feel good trouble.
And as for the text, not much said, basically belong to the rendering set class, people will avoid floating part of the display.
There's always an odd thing to do when using a float:
IMG {
Float:right;
}
It's time to witness the miracle! There is a relatively ugly way to solve this problem, which is called clearing float (clearfix hack).
Let's add some new CSS styles:
. clearfix {
Overflow:auto;
}
Now let's see what happens:
This can work in a modern browser. If you want to support IE6, you'll need to add the following style:
. clearfix {
Overflow:auto;
Zoom:1;
}
Some unique browsers require "extra care". Clear float this tan is deep, but this simple solution is already working on all the major browsers today.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
