Float layout:

Steps:

  1. Add attributes to child elementsfloat:left;andwidth
  2. Give the clearFix class to the parent element that adds the float attribute, and then edit the following in the stylesheet:
.clearfix::after {
  content: "";
  display: block;
  clear: both;
}
Copy the code

This CSS style allows the parent element to be wrapped around those givenfloatStyle elements that depart from the document flow.

Very important, must write!

Very important, must write!

Very important, must write!

  • If there is an extra part of the image such as the background color, usevertical-align:middle;Can eliminate more than the content (no why, for the moment by rote.
  • You can change border to border when it disturbs the layout by taking up page spaceoutline, so that the border does not occupy the box model space.
  • To evenly distribute, add a new layer (labeled div) with an arbitrary name to the content-marginProperty, can be pushed wider space. (I haven’t studied it yet, and will continue to learn in the future)

Experience of predecessors:

  1. The last element of a row is not setwidthOr save some space for a rainy day.
  2. The float layout doesn’t need to be responsive, because it’s designed for Internet Explorer, which mobile phones generally don’t have, and only fools use float layouts for mobile pages.
  3. Ie6/7 has a double margin bug, solution:
  • Change the margin of the element to half for IE6/7.
  • Change the element to an inline-box element (plus onedisplay:inline-box;)
  1. Just add a header and a tail (headerandfooter), can meet the needs of PC pages.
  2. Float layouts require the programmer to calculate the width of each element itself and are not flexible to use.
  3. CSS has no reason, for me this kind of novice to memorize now good. (smile)