1. First of all, the reason why the presence of the label classification levels, because they are in the standard document flow (block-level elements, inline elements, inline block element) of them .
2. How from the standard document flow ?
- float
- Absolute positioning
- Fixed positioning
These can make a label out of standard document flow, and the elements once out of the standard document flow, which means no longer constrained by the characteristics of the document flow.
3. Floating
- none: Specifies not float, default is not floating
- left: left floating
- right: the right float
4. The dynamic characteristics of the four major
- Floating elements off scale
- The floating elements against each other
- Effect around the floating element word
- Effect of contraction
* After once floating elements, the element will occupy a position behind the front element
* After floating elements can indeed flow from text documents, so there will be around the word effect
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>浮动的特性</title> 6 <style> 7 .d1 { 8 width: 300px; 9 height: 300px; 10 background-color: red; 11 float: left; 12 } 13 .d2 { 14 width: 400px; 15 height: 400px; 16 background-color: pink; 17 } 18 </style> 19 </head> 20 <body> 21 <div class="d1"></div> 22 Lorem ipsum dolor sit amet, consectetur adipiscing elit. And when the modes of the master builder is bound to accuse Him for Him to the needs of the debts, this the most easily in the explication thereof of mind, hatred, therefore, the consequences of the hardships of the time no one, neither enhanced. 23 Lorem -> very carrots, enhanced rebates. The duties of the master builder unless we have some of them, which, however, condemn at once take. Great great pleasure flight escaped from the blind refused to explain it rationally? And when the disgraceful cowardice of sorrows, and something similar has to be the Moreover, it is not. There is a desire for the smallest of the great, indeed, the consequences of the agony of the laborious, however, at other times it is to ask nothing of any one of the modes of rejecting some debts that I have never had any thing, which he enhanced the pain out of what? The sorrows of a great encounter that will open it spurns that in times of an impediment to accuse. This is often the result that deserves to be acceptable accepted pain and pain-free as it seeks to further denouncing that it is wise choice? This same shall be the law of the pleasure of the pain of any one any thing of the present time is disgraceful cowardice. To be worthy of that way of life of sorrows, I will not know how to reject the less I have! Pain, however, the pains of the troubles of the great pleasures of the body is to hate him the flight of them, the times! There is no us, all that time, the master builder to elect only betake himself fled, and is enhanced for his toil, and will occur. By a similar repel the enduring of the same, this receives the rejecting some of them that will open, indeed, and whom they despise provide in the pleasures of the body, for the result will be! The flight, which he hated all of them deal corruptly, praising the pleasures of the nature of the pain-free encounter often, as here, no. My hardship and discomfort will occur with any other to achieve the advantage of the choice of the nature of the needs of the very thing that they are accusing enhanced the pleasure of the just? The offices of the desire of no one, no one will come in the time of the choice of the times through the fault of the pain will never be, therefore, the pleasures of the thing. Been blinded by the blandishments of easy to provide in the offices of any of us who, when they encounter no one here to be a distinction, rejecting some, therefore, to be cast at once take the pains. , Corrupted by any of these modes of the great grief and toil, of hardship or that he was born either in respect of the desire to seek his own, one was only the time of the error, and the pain was less, but it would never be acceptable to some, was invented! My toil, to us, because the pleasure of pleasures, the pains of labor to support a reason. Something similar has been blinded by the great at the consequences of choosing the least of these, and severe pain in the hatred of the whole is disgraceful cowardice and the blessed, to make the advantage of rejecting some of denouncing deserted the general's no reason, neither the enduring of the pleasures of which they are accusing. Lil Kim was born to be the body 's follow one of life from the pleasures of the laborious nature of the right of freedom of the wise man assured him that nothing. How to do to obtain pardon for the fault of the officers of whom there is anything of sorrows, and repudiated a thing which he broke up rejecting some to follow the encounter are a great pain was you were not selected for the choice of the distinction, however, for it was He that hateth we may be able to choose the right accepted. He also was born a desire of which its not the right of accepted eager than the shunning? No one is able to follow the times also the Architect 24 </body> 25 </html>
* Contraction element
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>lianxi</title> 6 <style> 7 div{ 8 float: left; 9 background-color: red; 10 } 11 </style> 12 is </ head > 13 is < body > 14 < div > 15 This is a paragraph of text 16 </ div > . 17 </ body > 18 is </ HTML >
* After floating elements, when a line does not fit, you can find will go ahead "squeeze" position, if you have moved in the past, if not not go
eg:. 1 block elements can be displayed side by side, it will not fill 100% of the parent element of the block elements is not provided when the width
2. The element may be provided within the line width and height, can be displayed side by side
Floating affect subsequent elements of the layout
* Floating bring adverse effects
1. If not set the width of the parent element and the child elements of all floating, then the height of the parent element will become 0
2. After floating in front of the elements, the elements behind will impact
At this point we need to clear the float caused by the impact, in order to allow subsequent elements can perform normal
Clear method
1. partition method
1 <div class="clear"></div>2 .clear{clear:left/right/both}
2. Give the parent element a height
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>练习</title> 6 <style> 7 .fu1{ 8 height: 500px; 9 /*background-color: ;*/ 10 } 11 .c1{ 12 width: 200px; 13 height: 200px; 14 float: left; 15 background-color: blue; 16 } 17 .c2{ 18 width: 200px; 19 height: 400px; 20 float: left; 21 background-color: #888; 22 } 23 .fu2{ 24 height: 150px; 25 background-color: #222; 26 27 } 28 29 </style> 30 </head> 31 <body> 32 <div class='fu1'> 33 <div class='c1'> 34 35 </div> 36 37 <div class='c2'> 38 39 </div> 40 41 </div> 42 <div class='fu2'> 43 44 </div> 45 </body> 46 </html>
3.伪元素清楚法
1 .clearfix:after{ 2 /*在box1盒子后面添加内容*/ 3 content:'.'; 4 /*设置为块,结合clear:both去想*/ 5 display: block; 6 /*隐藏这个块,但是还占位置*/ 7 visibility: hidden; 8 /*去掉高度,不占位置,取消冗余,*/ 9 height:0; 10 /*最后清除浮动的影响*/ 11 clear:both; 12 }
4.
overfiow:hidden;
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>小练习</title> 6 <style> 7 .box1{ 8 /*height: 500px;*/ 9 /*background-color: ;*/ 10 overflow: hidden; 11 } 12 .c1{ 13 width: 200px; 14 height: 200px; 15 float: left; 16 background-color: blue; 17 } 18 .c2{ 19 width: 200px; 20 height: 400px; 21 float: left; 22 background-color: #888; 23 } 24 .box2{ 25 height: 150px; 26 background-color: #222; 27 28 } 29 30 </style> 31 </head> 32 <body> 33 <div class='box1'> 34 <div class='c1'> 35 36 </div> 37 38 <div class='c2'> 39 40 </div> 41 42 </div> 43 <div class='box2'> 44 45 </div> 46 </body> 47 </html>
溢出隐藏
overflow属性规定当内容溢出元素框时发生的事情。
说明：
这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条