float in a detailed CSS

This article mainly introduces the usage of float in CSS, and several kinds of layout methods commonly used in Web pages. Have a certain reference value, follow the small series below to see it

float and margin

Two adjacent floating elements, when the first floating element (whether left or right floats) has a width of 100%, the second floating element is squeezed below, and by adding a negative margin-right value (the absolute value is at least equal to its own width), you can return it to the first row.

When writing HTML code, our usual habit is to write code from left to right based on UI style, but sometimes the right side of the content is more important, so its HTML structure needs to be placed on the left side of the content, let it load earlier, such as:

Left-side fixed-width flow layout

<p class= "comment" >    <!--important Content--    <p class= "Content" >      <p class= "Author" >        <span class= "name" > Wow haha </span>        <span class= "date" >2016-78-55</span>      </p>      <p class= "text" > Eat no longer fat, good sorrow people ah, how can quickly grow fat, online, urgent! Eat more also not long fat, good sorrow people ah, how can quickly grow fat, online and so on, urgent! Eat more also not long fat, good sorrow people ah, how can quickly grow fat, online and so on, urgent! Eat more also not long fat, good sorrow people ah, how can quickly grow fat, online and so on, urgent! Eat more also not long fat, good sorrow people ah, how can quickly grow fat, online and so on, urgent! Eat more also not long fat, good sorrow people ah, how can quickly grow fat, online and so on, urgent! Eat more also not long fat, good sorrow people ah, how can quickly grow fat, online and so on, urgent! </p>      <p class= "meta" >        <span class= "Msg-tag" > Likes </span>        <span class= "Msg-tag" > Reply </span>      </p>    </p>    <!--left Content-    <a href= "#" class= "Avatar" ></a>  </p>

* {margin:0; padding:0;} Li {list-style:none;} a {text-decoration:none;} Body {font-family: ' Microsoft Jas Black ';}. Wrap {  width:800px;  margin:50px Auto;}. Content {  float:right;  margin-left:100px;}. Date {  font-size:14px;  Color: #666;}. Text {  margin:20px 0;}. Avatar {  float:left;  Margin-right: -80px;}. Avatar img {  width:80px;  height:80px;  border-radius:50%;}

As shown in the figure above, despite the effect on the UI. The content element is on the right side of the. Avatar, but we still need to put the. Content element in front of the. Avatar element in the HTML structure, and this time it can be set to the right float by giving the. Content element, and then to the. Avatar element set left or right to float, and then add a negative margin-r ight value, let it go back up.

1. The left and right sides are variable width

：

HTML code:

<p class= "comment" >    <a href= "#" class= "Avatar" ></a >    <p class= "Content" >      <p class= "Author" >        <span class= "name" > Wow haha </span>        <span class= "date" >2016-78-55</span>      </p>      <p class= "text" > Eat too much and not grow fat, good sorrow people ah, How can you get fat quickly, online etc, urgent! Eat more also not long fat, good sorrow people ah, how can quickly grow fat, online and so on, urgent! Eat more also not long fat, good sorrow people ah, how can quickly grow fat, online and so on, urgent! Eat more also not long fat, good sorrow people ah, how can quickly grow fat, online and so on, urgent! Eat more also not long fat, good sorrow people ah, how can quickly grow fat, online and so on, urgent! Eat more also not long fat, good sorrow people ah, how can quickly grow fat, online and so on, urgent! Eat more also not long fat, good sorrow people ah, how can quickly grow fat, online and so on, urgent! </p>      <p class= "meta" >        <span class= "Msg-tag" > Likes </span>        <span class= "Msg-tag" > Reply </span>      </p>    </p>  </p>

Core points:

The. Avatar element is left floating, the. Content element's display property is set to Table-cell, in fact here. The content element does not have to be set to display as Table-cell, as long as it can trigger bfc/ Haslayout on the line, such as:

Float:left/rightposition:absolute/fixedoverflow:hidden/scroll (ie7+) Display:inline-block/table-cell (IE8+)

But because the. Content element is adaptive, cannot be set wide, and contains block-level elements, you can only set the overflow property.

CSS code:

* {margin:0; padding:0;} Li {list-style:none;} a {text-decoration:none;} Body {font-family: ' Microsoft Jas Black ';}. Wrap {  width:800px;  margin:50px Auto;}. Avatar {  float:left;  margin-right:20px;}. Avatar img {  width:80px;  height:80px;  border-radius:50%;}. Content {  Display:table-cell;}. Date {  font-size:14px;  Color: #666;}. Text {  margin:20px 0;}

2. Right-side fixed-width flow layout

：

HTML code:

<p class= "wrap" >  <ul class= "list" >    <li class= "Item" >      <p class= "Content-wrap" >        <p class= "Content" >          <p class= "Author" >            <a href= "#" class= "Avatar" ></a>            <span class=" name "> Blackstar </span>            <span class=" Date " >2016-01-22</span>          </p>          <a href= "#" class= "title" > Not on </a>          <p> Tortured each other to the white-headed sorrow determined not to let go of the beginning of entanglement and then be amplified by the freedom of your violent too tender feelings and pain and enjoy if I say don't kiss you don't stop who can force me to </p>          <p class= "meta" >            <span class= "Category-tag" > Songs </span>            <span class= "Msg-tag" > Likes 5000</span>          </p>                       </p>      </p>      <a href= "#" class= "thumbnail" ></a>       </li>  </ul> </p>

Core points:

1: When the first floating element has a width of 100%, the second element wraps itself, next to the first element, and then adds a negative margin value to the second floating element so that it goes up

2: First floating element. The content has a wrapping element outside it, which makes it easy to add a padding-right value to the. Contents element, leaving a gap between the left and right images

In fact, the idea of double-wing layout also contains the above two points.

CSS code:

* {margin:0; padding:0;} Li {list-style:none;} a {text-decoration:none;} Body {font-family: ' Microsoft Jas Black ';}.  Wrap {width:800px; margin:50px Auto;}.  item {padding-bottom:15px;  border-bottom:1px solid #ccc; Overflow:hidden;}.  content {Float:left; padding-right:180px;}.  Avatar {display:inline-block;  width:32px;  height:32px;  border-radius:50%;  Vertical-align:middle; Overflow:hidden;}.  Avatar img {width:100%; height:100%;}. name {vertical-align:middle;}.  Date {font-size:14px;  Color: #666; Vertical-align:middle;}.  Title {Display:block;  padding:10px 0;  font-size:18px;  Font-weight:bold;  line-height:1.5; Color: #333;}.  thumbnail {float:left; Margin-left: -120px;}.  Thumbnail img {width:120px; height:120px;}.  meta {margin-top:15px; font-size:14px;}.  Category-tag {display:inline-block;  Padding:0 8px;  margin-right:10px;  border:1px solid #ea6f5a;  border-radius:3px; Color: #ea6f5a}.msg-tag {color: #999;} 

3. Fixed on both sides, Middle adaptive three-column layout

Now the three columns layout is very few, if you want to use, please direct Baidu Double Wing layout or the Holy Grail layout.