css float floating phenomenon and removal method
First to clear floating original definition and usage scenarios: to achieve the effect of text surrounding a picture.
Except floating outside, currently no other way to achieve text wrapping
Let's look at specific definition of floating:
Floating frame can move around until it encounters the outer edge or the other edge comprises a block floating box. Floater not belong to the normal stream of the document, layout belonging to float. (CSS positioning three basic mechanisms: the normal stream, floating and absolute positioning)
When a float element, will not affect the layout of the block-level frame will only affect inline frame (usually text) are arranged, the document will behave normal stream and the floating frame does not exist, when the floating frame height when exceeding the containing box, comprising a box does not also occur automatically stretched high floating element is closed ( "collapsed height" phenomenon). As the name suggests, it is to float on the normal stream, like clouds, like, but only floating around.
That this feature is floating, then cause the normal stream belonging to the floating elements, since the internal block comprising normal stream without other elements, and also exhibits a high degree of 0 (the height of collapse). In the actual layout, often this is not what we want, it is necessary to close the floating element, to include the box showed normal height.
Floating is not cleared, the page will cause confusion (as follows):
- Float width value is not set, the width of the element varies with the width of the content
- Adjacent elements will have an impact, especially close to the neighboring elements behind the elements.
If the neighbors are block-level elements will ignore the floating block box, which is what we usually see results - Shidao itself as far as possible with the floating element in the same row, leading to covered floats. Unless the div width is set, and the width of the parent element sufficient to contain them, such sibling will be forced to wrap.If the neighbors are inline elements, the float will be around as much as possible.
- Parent element is provided all the elements floating, the height of the parent element acquisition failure (no parent element for the floating element height, i.e. the height of collapse).
Before introducing clear float method, first understand: What is BFC?
Block formatting contexts (context block level format), hereinafter referred to as the BFC, for block-level layout element. BFC created element is a separate box (a box in HTML can not see it), which will not affect the child elements outside of the element in the layout, the same, the outside elements, it will not affect its child elements.
By default only the root element (body) a case where the block-level context, at least one other element satisfies the following conditions to form BFC:
float属性不为none
position属性不为static | relative
display属性为下列之一:table-cell | table-caption| inline-block | flex | inline-flex
overflow属性不为visible
fieldset元素 //fieldset标签将表单的信息进行分类
但是它们各自却有着不一样的表现：
display: table : 在响应式布局中会有问题
overflow: scroll : 可能会出现你不想要的滚动条
float: left: 使元素左浮动，并且其他元素对其环绕
overflow: hidden: 消除溢出部分Note that, display: table itself does not create BFC, but it generates an anonymous box (anonymous boxes), and display anonymous box: table-cell to create a new BFC, in other words, the trigger block-level format context of the anonymous box, not the display: table. So by display: table and display: BFC effect table-cell created is not the same.
BFC three characteristics:
- BFC will prevent margins overlay
When two adjacent blocks in the same block in the context of a block level format, the outside vertical distance therebetween overlay occurs. In other words, if the two neighboring blocks belong to the same block is not a block-level formatting context, they will not overlap with the margins.
- BFC floating elements do not overlap
According to regulations, a block-level format and the context can not be outside the border element from its inside to overlap. This means that the browser will give context to create block-level formatting implicit margins and float it to prevent outside elements from the stack. When the system does not work due to this reason, when the block-level format to a floating next context to add negative margins
- BFC may generally comprise a floating (i.e., when calculating the height of the BFC, the floating elements are also involved in the calculation)
The independent block-level context can be wrapped buoyancy flow, all sub-elements does not cause the floating height of the container to collapse, that is to say comprising a floating element will block height is counted, so do not hold up to the height of clear float. However, while BFC any document belonging to the normal stream.
Parent element to create a new BFC, may be closed float
There is also a float with BFC and related concepts: hasLayout
hasLayout is ie private concept, ie7 and earlier ie browser does not support the BFC, but we can add the corresponding rules for ie7,6 hasLayout browser to achieve the effect of the BFC!
Layout IE using the concept to control the size and position of the element. Javascript function can be used to see whether an element has hasLayout Layout, returns true | false. An element with Layout, it will have its own size and location; if not, it is controlled by the size and location of the nearest ancestor elements have layout.
hasLayout is a read-only property, you can not use Javascript to be set. hasLayout property element is true when the reach and BFC similar effect. The following methods can make elements hasLayout is true:
position: absolute
float: left | right
display: inline-block
width: 除 “auto” 外的任意值
height: 除 “auto” 外的任意值
zoom: 除 “normal” 外的任意值
writing-mode: tb-rl
在IE7中使用overflow: hidden|scroll|auto
Specific removal methods and their advantages and disadvantages of floating :
In fact, we used to call "clear float" should actually be called "closed float." The effect we want to achieve is to say the exact closed float, rather than simply remove floating, simply remove the floating, does not solve the problem of container height collapse. Before and after (FIG floating removing effect :)
- Clear float: Clear the corresponding word is clear, in the corresponding CSS property is clear: left | right | both | none;
- Closed float: a more precise meaning of the floating element is closed, thus reducing the impact of floating brings.
In summary, there are two methods closing float:
Tag plus clear peer behind the floating element: both | left | right properties (one, two, three of the following methods)
New elements of the BFC (four, five or six of the following methods)
<style type="text/css">
.clearFloatDiv1 { width: 400px; border: 1px solid #00ffde;padding: 20px; }
.clearFloatDiv1 > div { width: 200px;padding: 25px 0; }
.clearFloatDiv1 > div:nth-child(1) { background: #0ef; }
.clearFloatDiv1 > div:nth-child(2) { background:#f7633d;}
.clearFloatDiv1 > p { width: 400px; padding: 15px 0;background: #fcebd1; }
</style>
<div class="clearFloatDiv1">
<div style="float: left;"></div> //浮动元素
<div style="float: left;"></div> //浮动元素
</div>
Method One: floating element, plus the style containing clear: both empty tag
<div class="clearFloatDiv1">
<div style="float: left;"></div> //浮动元素
<div style="float: left;"></div> //浮动元素
<p style="clear:both;"></p> //加空标签，闭合浮动
</div>
Advantages: easy to understand, easy to grasp
Disadvantages: will add a lot of meaningless empty label, contrary to the structure and performance of separation, post-maintenance would be a nightmare.
Method Two (destroy recommended): is said to be the tallest on the method: after method (Note: The role of the father in the floating element)
Principle: A method of removing floating, he is to use: after and: before inserting the dummy elements in the two inner elements, added elements in the dummy clear: both properties. And a method similar
.clearFloat { /*对IE6/7的兼容处理*/
zoom:1; /*触发 hasLayout*/
}
.clearFloat::after {
clear:both; /*指清除所有浮动*/
content:'.'; /*内容，可以为空。也可以用Unicode字符里的 “零宽度空格”，也就是U+200B，这个字符本身是不可见的，可以省略掉 visibility:hidden*/
display:block; /*对于FF/chrome/opera/IE8不能缺少*/
width: 0;
height: 0;
visibility:hidden; /*允许浏览器渲染它，但是不显示出来*/
}
<div class="clearFloatDiv1 **clearFloat** "> //加clearFloat清除浮动
<div style="float: left;"></div> //浮动元素
<div style="float: left;"></div> //浮动元素
</div>Pros: good browser support, not prone to blame the problem (currently: large sites are using, such as: Tencent, Netease, Sina, and so on)
Disadvantages: Code more than two codes to be used in combination to make major browsers support
Method three (difference): Use br labels and attributes themselves html
(Corresponding to the clear float: both, float: left, float: Effect of right)
<div class="clearFloatDiv1">
<div style="float: left;"></div>
<div style="float: left;"></div>
<br clear="all"/> //****闭合浮动
</div>Advantages: Semantic slightly ahead null label mode, smaller amount of code
Cons: Also contrary to the structure and performance of separation, not recommended
Method four: the parent element defines the overflow: auto | hidden (compatible ie6, needs to trigger hasLayout, such as adding: zoom: 1)
<div class="clearFloatDiv1" style="overflow:auto;"> //新建BFC
<div style="float: left;"></div>
<div style="float: left;"></div>
</div>There are three overflow property attribute values: hidden, auto, visible. We can use hiddent and auto value to clear the float, but remember not to use visible value. It is said to auto seo more friendly, hidden for seo is not too friendly.
Advantages: simple, less code, the browser supports good shortcomings
Disadvantages: internal width and height than the parent div, a scroll bar will appear.
Method five (poor): parent element also set float float: left | right
<div class="clearFloatDiv1" **style="float: left;"**> //新建BFC
<div style="float: left;"></div>
<div style="float: left;"></div>
</div>Advantages: the absence of structural and semantic problems, a very small amount of code
Disadvantages: makes the layout of the parent element adjacent elements will be affected, not always float to the body, not recommended
Method six (difference): Set the parent element display: table
<div class="clearFloatDiv1" **style="display: table;"**> //新建BFC
<div style="float: left;"></div>
<div style="float: left;"></div>
</div>Advantages: complete semantic structure properly, the very small amount
Cons: box model attributes have changed, a series of problems this may cause more harm than good, is not recommended