clearfix:after[的用法]_html/css_WEB-ITnose

css 浏览器 html

.clear{clear:both}

.clear{clear:both}

回复讨论(解决方案)

clear 属性规定元素的哪一侧不允许其他浮动元素。
说明
clear 属性定义了元素的哪边上不允许出现浮动元素。在 CSS1 和 CSS2 中，这是通过自动为清除元素（即设置了 clear 属性的元素）增加上外边距实现的。在 CSS2.1 中，会在元素上外边距之上增加清除空间，而外边距本身并不改变。不论哪一种改变，最终结果都一样，如果声明为左边或右边清除，会使元素的上外边框边界刚好在该边上浮动元素的下外边距边界之下。
默认值： none
继承性： no
版本： CSS1
JavaScript 语法： object.style.clear="left"
实例
图像的左侧和右侧均不允许出现浮动元素：
img
  {
  float:left;
  clear:both;
  }


clear 属性规定元素的哪一侧不允许其他浮动元素。
说明
clear 属性定义了元素的哪边上不允许出现浮动元素。在 CSS1 和 CSS2 中，这是通过自动为清除元素（即设置了 clear 属性的元素）增加上外边距实现的。在 CSS2.1 中，会在元素上外边距之上增加清除空间，而外边距本身并不改变。不论哪一种改变，最终结果都一样，如果声明为左边或右边清除，会使元素的上外边框边界刚好在该边上浮动元素的下外边距边界之下。
默认值： none
继承性： no
版本： CSS1
JavaScript 语法： object.style.clear="left"
实例
图像的左侧和右侧均不允许出现浮动元素：
img
  {
  float:left;
  clear:both;
  }

.clearfix:after可以在子节点float的时候撑开父节点

首先 清除浮动的原理 ，其实 是元素留出足够多的 垂直外边距 给浮动的元素。

<div >   <div style="float:left"></div></div>

<div style="float:left" >   <div style="float:left"></div></div>

<div style="clearfix" >   <div style="float:left"></div></div>.clearfix:atfer{content:".";display:block;visibility:hidden;height:0;clear:both;}

<div style="overflow:hidden" >   <div style="float:left"></div></div>

谢谢....终于懂了...