steps

  • Add float: left and width to the child element
  • Add.clearfix to the parent element

experience

  • More experienced people will leave some space or leave the last one at width
  • There is no need to be responsive because there is no Internet Explorer on the phone and this layout is specifically for Internet Explorer
  • IE 6/7 exists double margin bug, there are two solutions
  • One is to make mistakes, for IE 6/7 margin half
  • Add a display: inline-block
  • Remove the floating

practice

Different layout

  • Two-column layout with float (e.g., top bar)
  • Use float for a three-column layout (e.g. content area)
  • Use float for a four-column layout (e.g. navigation)
  • Use float for average layouts (such as product displays)
  • Once taobao’s front end invented the double wing layout, do not learn, has been out of date
  • code

experience

  • Add a header and a tail, and you’ll have all your PC page needs
  • Float is for idiots on mobile pages
  • Float requires the programmer to calculate its own width and is inflexible
  • Float is enough for dealing with IE