Implementation of the three-column layout && position application && removal of the meaning of the move

The layout of individual elements in a Web page is usually arranged from top to bottom according to the flow of documents. If you want to implement some unique layouts, you need to make the appropriate CSS settings. (position, margin, padding, float)

The layout schemes circulated on the network generally involve clearing the float. So what does that mean, and how does it happen?

|--position--|

position:static | Relative | Absolute | Sticky | Fixed |
Position mainly have these options.
In addition to static, the remaining options require additional related properties. (Top,right,left,bottom)
Sticky
      Sticky general performance and relative consistent, when and only if the actual property < Set property, the property will be fixed.

Static

This keyword makes this element use normal behavior, that is, the element is in the document flow its current layout position, top ,  ri Ght ,  bottom ,  left   and   Z-index   property is not valid.

relative

Use this keyword to lay out elements as if this element had not been set to be positioned. It adapts to the position of the element and does not change the layout (this leaves a blank space where the element originally resides). Position:relative to Table-*-group, Table-row, Table-column, Table-cell, table-caption invalid.

Absolute

does not reserve space for elements, and the element position is determined by specifying its offset from the ancestor of its nearest non-static location. An absolutely positioned element can set margins (margins) and is not merged with other margins.

Fixed

does not reserve space for elements. Specifies the space of an element by specifying its position relative to the screen window, and the position of the element does not change when the screen scrolls. The elements appear in a fixed position on each page as they are printed. The fixed property typically creates a new stack environment.

Knowing the meaning of the attribute, what about flow?
Flow:right|left|bottom|top
Flow allows the element to retain its hover effect without changing its hover characteristics with the size of the window

because a tag is set to move, it affects the position of the adjacent label, causing it to deviate .
Clear the effect of this deviation!

The solution is as follows: quoted Http://stackoverflow.com/questions/211383/what-methods-of-clearfix-can-i-use

Depending upon the design being produced, each of the below Clearfix CSS solutions have its own benefits.

"Reloaded" Clearfix

Thierry Koblentz ' of CSS Mojo wrote another article revisiting the Clearfix, making a strong argument for dropping display: table i n favor of which have the advantage of not display: block disabling margin-collapse between containers.

The latest Micro-clearfix code is now:

.container::after {    content:"";    display:block;    clear:both;}

"Beat that Clearfix", a clearfix for modern browsers

Thierry Koblentz ' of CSS Mojo have pointed out if targeting modern browsers, we can now drop the and zoom ::before Pro Perty/values and simply use:

.container::after {    content:"";    display:table;    clear:both;}

This solution does "not" for IE 6/7 ... on purpose!

Thierry also offers: "A word of caution:if you start A new project from the scratch, go for it, but don ' t swaps this technique With the one that has now, because even though your do not support oldie, your existing rules prevent collapsing margins. "

Micro Clearfix

The most recent and globally adopted Clearfix solution, the Micro-Clearfix by Nicolas Gallagher.

.container::before, .container::after {    content:"";    display:table;}.container::after {    clear:both;}.container {    zoom:1; /* For IE 6/7 (trigger hasLayout) */}

Overflow Property

This basic method was preferred for the usual case, when positioned content would not show outside the bounds of the contain Er.

Http://www.quirksmode.org/css/clearing.html- explains how to resolve common issues related to this technique, namely, setting on the width: 100% container.

.container {    overflow: hidden;    display: inline-block; /* Necessary to trigger "hasLayout" in IE */    display: block; /* Sets element back to block */}

Rather than using the property display to set "Haslayout" for IE, and other properties can is used for triggering "haslayout" fo R an element.

.container {    overflow: hidden; /* Clearfix! */    zoom: 1;  /* Triggering "hasLayout" in IE */    display: block; /* Element must be a block to wrap around contents. Unnecessary if only using block-level elements. */}

Another-to-clear floats using the overflow underscore hack. IE would apply the values prefixed with the underscore, and other browsers would not. The property zoom triggers haslayout in IE:

.container {    overflow: hidden;    _overflow: visible; /* for IE */    _zoom: 1; /* for IE */}

While the This works ... it is not a ideal to use hacks.

":: After" pseudo-element

This older ' easy clearing ' method has the advantage of allowing positioned elements to hang outside the bounds of the Cont Ainer, at the expense for more tricky CSS.

Http://www.positioniseverything.net/easyclearing.html

.container {    display: inline-block;}.container::after {    content: "";    display: block;    height: 0;    clear: both;    overflow: hidden;    visibility: hidden;}.container {    display: block;}

Note that you should always use the double colon, :: for and before after , unless you need to support IE8. A double colon is standard for pseudo-elements, and the Single-colon implementation are deprecated and support could well B E dropped in the future.

Implementation of three-column layout


There are two implementation methods:
1, two sides Position:absolute + Top+right/left to make the effect of margin
Middle Set Margin:auto 140px 20px 220px.
2, Float:left/right Middle clear float+ margin setting
"First Example"
<! DOCTYPEHtml>
<Htmllang="EN" >
<Head>
<Metacharset="UTF-8" >
<Title>title</Title>
</Head>
<StyleType="Text/css" >
.main{Padding20pxBackground#eee;Border#999;Margin20pxPositionrelative;}
.left{PositionAbsoluteTop20pxLeft20pxBackgroundWhiteWidth200pxText-align:Center
.right{PositionAbsoluteTop20pxRight20pxBackgroundWhiteWidth120pxClearLeft
.intro{MarginAuto140Px20Px220px;Height500pxBackgroundWhite;}
.logo{Height80pxWidth80pxBackground#eee;Margin10PX Auto;}
</Style>
<Body>
<Divclass="Main" >
<Divclass="Left" >
<Span>Pheasant Battle Team </Span>
<Divclass="Logo" ></Div>
</Div>
<Divclass="Intro" >According to a survey conducted in Friday (August 5), the UK labour market was "plummeting" after the referendum, with the number of fixed jobs recruited last month showing the biggest decline since May 2009. A monthly report released by the UK Recruitment and Employment Federation (REC) shows that the starting salary increase for fixed positions in July is the lowest in more than three years. On the whole, the survey further demonstrated that corporate confidence and activity slowed sharply after Brexit referendum. The UK job market fell sharply in July, with fixed-job hiring falling to its lowest level since the 2009 recession, REC CEO Kevin Green said. The economic turmoil after the referendum Brexit is undoubtedly the root cause. </Div>
<Divclass="Right" >
<Divclass="Logo" ></div>
<div class="logo" ></div>
<div class="logo" ></div>
<div class="logo" ></div>
</div>

</div>
</body>
</html>                
"Second Case"
Here's a key point: page rendering is rendered based on the location of the document flow, so the rendering order should be left,right,middle.
Otherwise, right is at the bottom, which is because the middle is stuck to the left and then goes down to the next element. Right (render rule, top-down)
So right, just below.

So, to change the position of the relevant Div, the problem is solved

<! DOCTYPEHtml>
<Htmllang="EN" >
<Head>
<Metacharset="UTF-8" >
<Title>title</Title>
</Head>
<StyleType="Text/css" >
.main{Padding20pxBackground#eee;Border#999;Margin20pxPositionrelative;}
.left{FloatLeftBackgroundWhiteWidth200pxText-align:Center
.right{FloatRightBackgroundWhiteWidth120px;}
.intro{MarginAuto140Px20Px220px;Height500pxBackgroundWhiteOverflowAuto
.logo{Height80pxWidth80pxBackground#eee;Margin10PX Auto;}
</Style>
<Body>
<Divclass="Main" >
<Divclass="Left" >
<Span>Pheasant Battle Team </Span>
<Divclass="Logo" ></Div>
</Div>
<Divclass="Right" >
<Divclass="Logo" ></Div>
<Divclass="Logo" ></Div>
<Divclass="Logo" ></Div>
<div class= DIV> 
 </ DIV> 
 <div  according to Friday (August 5) A survey showed that the UK labour market appeared "plummeting" after the referendum Brexit, with the number of fixed jobs recruited last month showing the biggest decline since May 2009. A monthly report released by the UK Recruitment and Employment Federation (REC) shows that the starting salary increase for fixed positions in July is the lowest in more than three years. On the whole, the survey further demonstrated that corporate confidence and activity slowed sharply after Brexit referendum. The UK job market fell sharply in July, with fixed-job hiring falling to its lowest level since the 2009 recession, REC CEO Kevin Green said. The economic turmoil after the referendum Brexit is undoubtedly the root cause. </DIV> 
 
 </DIV> 
 </body> 
 </HTML> 
 
  effect 
  
 
 
             

Implementation of the three-column layout && position application && removal of the meaning of the move