Floating in CSS and clear floating

For CSS floating problem, there was a time I was mengmengdongdong feeling, for the property of float has been indefinitely bright, for this let us always mengmengdongdong knowledge point, we need to find a time, carefully to understand it, from this process we will also go to review the previous knowledge, This is really a process that will let us improve, is the so-called warm knowledge of the new. So in the process of learning also read a lot of great God's blog, here to summarize my personal understanding of float;

CSS floating so that we often use in the layout of a property, in a large number of use, we may just smattering to use, or use the time to get the results we want to be absolutely OK, and not to explore its true principle of implementation, with this habit, we will eventually pay for it When you use it in an emergency, do you still have to guess and try? When we use two div is, because div is block type, here are two Div, we don't go to specify width, just give them a height:

We can see that the width of the block module is automatically set to 100%, when we set the second Green Div property to Float:left, we will find that the second Div has a width, when the div will become like inline elements to use the width , which is why we have to manually set a width for the floating element, so if there is no content in our floating element, then he will be in the hour, because we have no content in the floating div, so it is now no width without height, so it disappears from our current page:

　　

Another example, we have a,b,c three boxes, their width and height are 100px, in the interface is arranged in this way:

　　

　　

Floating elements are separated from our original flow of documents, and we can consider the flow of documents as a building block, stacked with stacks of bricks, when one of them is pumped out, and the middle space is filled: we give the middle green B box a Float:left property

We found that the B box covered our blue box, when we gave the B box a float:right:

　

We can find that this time C box out, we can see that the B box from our original flow of the document floated out, then his original position caused by the space C up to fill up, then we have a question, now the B box floated out, then it will float to where? The official on the floating element has such a sentence, the floating box can float to the left or right, know that its edge touches the bounding box or another floating box border, because the float box is not in the normal document flow, so the document's normal flow of the block box does not exist in the same row floating box,

We set the C box to 300px wide, a and C widths of 100px

　　

As we can see, when the B box is floating, the C box is up to the B box's original position, so the B box and the C box overlap each other, but we should also find that the B box is floating out, but it does not float upward, so this time we may go back to think that The floating box just floats around and does not float upward, so we can add a left float to the C box.

　　

At this point you will find that the box on the left side of the C box touches the B box, so it is not intuitive enough, we also set A to left floating:

　　

At this time you will find that a,b,c three boxes into a column, this time we can summarize the position of the floating box, the first is the top and bottom position, the box above the floating box will hit the top edge or another non-floating box position, which is the front b,c or floating in a below the reason, in the left and right direction, Floating box will hit the left and right edge of the browser or another floating box to stop, if there is no floating box, the floating box will overwrite it, then here, we have been looking at the position of the floating box changes, then the floating box width will change? Here we set a scene, a box width 100px, height setting, b box in a box, width 50px, height is set to 100px,

　　

We can see that the red box has a green B box, the height of the red frame is the B frame, so if we let B float up?

　　

We will find a box is missing, here is what we often say the height of collapse, because B box floating up, this time a box does not feel the existence of the B box, so A's height collapsed, when the B box is only relative to other people do not exist, and its own height is still there, when we give a box to join a poem, We will be amazed to discover:

　　

This is a long time to let me puzzled, the text we entered will be like flowing water around the floating box B. According to the normal understanding, the text should be again under the B box, the reason is because B box floating, so the text in the red box to the B box as does not exist, But b box in the left float when the left edge touches the containing box, then fell from the air, close to the left border, this will have this text wrapping problem, so that we use the floating process, there will be such a problem, when using floating, we should be careful,

With floating, we should have a way to clear the float, or let the elements behind the box is not affected by the front floating box,

1, the first method is that we can add a label to each floating element Clear:both, and of course clear:left; and clear:right; these two ways, but what we need to understand is that This way of clearing the float only clears the effect of the float on the box that owns the property, which is not very important to clear our height collapse.

<divclass="a"style="width:200px;background:red;">This is a box .<divclass="b"style="float:left; width:100px;height:100px;background:green;"> </div></div><divclass="C"style="clear:both; width:100px;height:100px;background:blue;">This is box C .</div>

We can see that in a box due to the B box floating, and a high collapse, and the C box should be up to fill the B box blank, but because the C box has a property clear:both; So it is clear that the effect of the floating box on the C box, that is, the front floating b box for the C box is not floating, So it will be displayed in the normal order, but if there is a left floating box in front of the A box:

,

Black Box property is also left floating, we analyze, the red a box due to the height of the collapse of the text of the height of the left, and it is a black floating box, so at this time because a box does not float, he will be tight to fill the blank black box, because the green box is also left floating, so it will not be covered by black Instead, the left border is aligned with the black box, which is the L-Blue C box, which is also arranged in a normal sort order, with the upper end adjacent to the green box, because the float is cleared.

2, we can also see that the way to clear the float at times will bring us to look at the big problem, for the height of the collapse of the problem basically does not have any effect, then we look at the second method, add attribute Overflow:hidden;

　　

<div style="width:100px;height:100px;float:left; background: #000;">first Box</div><divclass="a"style="Overflow:hidden; clear:both; width:200px;background:red;"> <divclass="b"style="float:left; width:100px;height:100px;background:green;"> </div></div><divclass="C"style="Width:100px;height:100px;background:blue;">This is box C .</div></body>
　　
Seeing the results, we can say first, the clear:both in the Red a box clearly shows the floating effect of the black box above, while Overflow:hidden clears the height collapse problem in itself, overflow:hidden the meaning of this property is that the part that is beyond is hidden, But why did it clear the floating height collapse problem? This is too long to explain, and I really do not understand, probably an understanding is: when the element itself wants to go beyond the part of the hidden, he has a certain height, or you do not have height, you have to hide the elements inside you, This attribute is not useless, so in the presence of it is the truth, my understanding is that the inclusion of mad will automatically be the height of the floating box to prop up, and then beyond the part of the hidden,
3, the third way to clear the float is to use the after pseudo-object to clear the float, but this way IE browser is not supported, so only for non-IE browser,
　　
  . a:after{            clear:both;             " . " ;            Display:block;             0 ;            Visibility:hidden;        }
This clears the effect of floating elements in the A box.
4, the fourth method is to set a floating on the parent element to eliminate the height of the collapse problem, but the disadvantage of this approach is that the bottom element and then to add clear floating,
Summary: Said so much, feel floating is we can reduce the use of a property to reduce the use, because it has too many pits, then before writing this essay, I hesitate to write, many people think it is very simple, and look at it, then in the process of writing, I found you seem very simple things, When you want to explain to others, you will find that what you know is not good enough to describe in detail, you will find that you have a lot of things are smattering, but this is also a process of improvement, online about floating This problem has a lot of Daniel writing is super good, but I write this article more is thinking about a year or two later, When you come back to see you write these essays, if you will feel a good laugh, that year wrote this is what thing, then I will say, congratulations!
　　
　　
　　
Floating in CSS and clear floating