基礎知識-css第五天，今天學習了css主要知識浮動，和定位，都是關於網頁布局的。這個2塊知識用好了，後期做好看的動畫，布局就不成問題了。

浮動left

浮動的框可以向左或是向右移動，直到它的邊緣碰到包含框或是另個浮動框的邊框為止

清除浮動

額外標簽法

<style>
  outer{border:1px solid black; width:300}
  .inner{width:50px; height:50px; background
 
-color:#ff4400; margin-right:20px; float:Left;}
  .footer{backgrtound:#005fc3;width:200px; height:50px;}
  .clearfix{clear:both()}
</style>
<div class="outer">
  <div class="inner"></div>
  <div class="inner"></div>
  <div class="inner"></div>
  <div class="clearfix
 
"></div>
</div>//這是早期普遍使用的方法，但是對於有代碼潔癖的人來說，解決的不夠完美

註意：clear 屬性規定元素的哪一側不允許其他浮動元素。（屬性：left 左邊不出現浮動 \ right 在右側不出現浮動元素 \ both 左右倆側不出現浮動 \ none 默認值可以出現浮動 \ inherit 繼承父元素clear:inherit）

使用：after為元素

<style>
  outer{border:1px solid black; width:300}
  .inner{width:50px; height:50px; background
 
-color:#ff4400; margin-right:20px; float:Left;}
  .footer{backgrtound:#005fc3;width:200px; height:50px;}
  .clearfix:after{ content:‘‘; display:block; clear:both;}//最簡單的方法
  .clearfix(zoom:1;)//兼容 ie
</style>
<div class="outer clearfix">
  <div class="inner"></div>
  <div class="inner"></div>
  <div class="inner"></div>
</div>

給父元素定高

<style>
  outer{border:1px solid black; width:300； height：500px;}
  .inner{width:50px; height:50px; background-color:#ff4400; margin-right:20px; float:Left;}
  .footer{backgrtound:#005fc3;width:200px; height:50px;}
</style>
<div class="outer ">
  <div class="inner"></div>
  <div class="inner"></div>
  <div class="inner"></div>
</div>

利用overflow:hidden屬性

<style>
  outer{border:1px solid black; width:300； overflow:hidden; zoom:1;//兼容IE}
  .inner{width:50px; height:50px; background-color:#ff4400; margin-right:20px; float:Left;}
  .footer{backgrtound:#005fc3;width:200px; height:50px;}
</style>
<div class="outer ">
  <div class="inner"></div>
  <div class="inner"></div>
  <div class="inner"></div>
</div>

父級元素浮動

當父元素浮動的時候，無需為子元素的浮動或是清楚浮動，布局經常用到

<style>
  outer{border:1px solid black; width:300；float:left;}
  .inner{width:50px; height:50px; background-color:#ff4400; margin-right:20px; float:Left;}
  .footer{backgrtound:#005fc3;width:200px; height:50px;}
  .clearfix:after{content:‘‘; display:block; clear:both;}
  .clearfix{ zoom:1 }
</style>
<div class="outer ">
  <div class="inner"></div>
  <div class="inner"></div>
  <div class="inner"></div>
</div>
<div class="clearfix"></div>

overflow的使用

如果內容溢出一個元素框，會發生的事

overflow設置滾動條

顯示滾動條

<div style="width:260px; height:120px; overflow:scroll;"></div>

上下，左右滾動條

<div style="width:260px; height:120px; overflow-y:scrll;"></div> overflow-x(左右滾動條)

css定位oosition

第五天-css基礎（浮動 網頁布局 定位方式，清除定位）