【每日前端】float / clean

[jctang1202]

float

The float property in CSS is used for positioning and layout on web pages.
Note: An element that is floated is automatically display: block;

进行 float 的会从流中消失，但是会影响其他正常元素的行内元素。

.module {
  float: left;
}

clean

#footer {
   clear: both;
}

Float Layout , Content Collapse

.wrapper:after { 
  content: "";
  visibility: hidden;
  display: block;
  height: 0;
  clear: both;
}

<div style="clear: both;"></div>

.clearfix {
    overflow: auto;
}

If an element is taller than the element containing it, and it is floated, it will overflow outside of its container. Then we can add overflow: auto; to the containing element to fix this problem.

https://www.w3schools.com/css/css_float.asp
https://css-tricks.com/almanac/properties/f/float/

Bootstrap 3

栅格布局：

.row 和 .col-x-y

.row {
  margin-right: -15px;
  margin-left: -15px;
}

.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {
  float: left;
}

.row:after {
 clear: both;
}