3回答

• 

  ICHAYA

  2016-07-05 12:19:26

  。。。。视频里的clearfloat 明明是老师在reset.css里的一个类

  .clearfloat{
  	zoom:1;/*适用ie6、7*/
  }
  .clearfloat:after{
  	display: block;
  	clear: both;
  	content: " ";
  	visibility: hidden;
  	height: 0;/*其他适用*/
  }

  clearfloat这个类的作用是清除浮动影响。

  claerfloat用于[浮动子元素]的【父级元素】

  例如：视频中public-container有两个子元素header-logo和header-nav

  .public-container .header-nav{
  	float: right;/*header-nav右浮动，即[浮动子元素]*/
  	font-size: 14px;
  }
  .public-container .header-logo{
  	float: left;/*header-logo左浮动，即[浮动子元素]*/
  	margin-top: 40px;	
  }

  故，需要给public-container 这个父元素对应加上clearfloat属性，即：

  <div class="public-container clearfloat"><!--public-container加上clearfloat 用空格间隔不同class-->
  	    <div class="header-logo"><a href=""></a></div>
  	    <ul class="header-nav clearfloat">
  		<li class="item"><a href="">Our Story</a></li>
  		<li class="item"><a href="">Menu</a></li>
  		<li class="item"><a href="">Reservation</a></li>
  		<li class="item"><a href="">News</a></li>
  		<li class="item"><a href="">Rviews</a></li>
  	    </ul>
  </div>

  综上，要浮动的元素用float，浮动元素的父元素用clearfloat  

  
  

  float更多参考请见:CSS float 属性

  clearfloat更多参考请见：CSS深入理解之float浮动---4.1清除浮动
  

  clearfloat即是视频中的.clearfix

  
  

  望采纳or觉得好就点个赞呗

  0 2
• 

  陈小窝

  2016-06-19 13:46:23

  float是浮动也就是脱离普通的文档流，当浮动元素脱离文档流就是造成他的父级的高度塌陷，或者是其他块找不到，而clearfloat是清除浮动，他会清除浮动所造成的影响，当你的元素需要水平摆放时，你可以使用浮动，还可以使用display:inline-block...

  案例：

  

  

  

  

  
  

  0 0
• 

  伊飘雪3446279

  2016-06-19 00:29:30

  float:left; 当前元素向左侧浮动.
  float:right: 当前元素向右侧浮动.

  clear:left; 禁止左侧出现浮动元素,如果左侧存在浮动元素,则当前元素将在浮动元素下面另起一行呈现.
  clear:right; 禁止右侧出现浮动元素,如果右侧存在浮动元素,则右侧的浮动元素将在当前元素下面另起一行呈现.
  clear:both; 禁止左右两侧出现浮动元素,当前元素将排斥浮动元素独占一行呈现.

  
  

  0 0