css collapse margin plus other configuration change , the parent becomes bfc
The combined margin is the margin between the two brothers are combined vertically, the uppermost pixel to pay more brothers, do not change the structure
※ float floating flow generated, block-level elements see see them (so the two boxes, will be in the same row) generated bfc earth elements and text elements, and text can be seen floating element
BFC是block format context
※ normal rule in CSS to HTML think each element as a box, but further believes that every box has a set of rendering exactly the same syntax rules, so we can
By some means to make a special box rendering rule change
: position / float / display:inline-block; / overflow:hidden;
Select the appropriate need for your development needs
In the learning process, how flexible the play actually was not easy for Chinese students, we are accustomed to fixed mode of thinking,
Affected childhood education, resulting in many students work or other everthing is the same standard,
Is personnel training mode is the same as you? In order to put us into the same people? The answer, is wrong
layout
table (table) layout -> float (float) Layout -> position (positioning) Layout -> flex (elastic ) Layout -> grid (grid) layout (not yet officially launched)
float in order to become past tense , but in honor, or to talk about this issue, margin collapse issue
: At first float is not to be used to page layout, but to solve graphic information asked in pictures and text conflict issues in order to achieve the effect of pictures and text wrapping
If the parent element a floating element is not set height, which child elements float when the parent element because no child element inside hold up height becomes 0 so; that can not hold a parent child
How to solve, with pseudo-element, content = ""; clear: both; display: block; pseudo-element-level elements are naturally row to remove floating elements are block-level so add display: block;
And playing position internal float system level block elements into rows
Page elements generally divided into: normal stream, floating stream bitstream.
Page model is divided into: a floating box model Layer Model Model
See: https://www.jianshu.com/p/795d070e62f5
See: https://www.bilibili.com/video/av35978534/?p=6 crossing into a brother