『壹』 css的clear屬性
clear 屬性規定元素的哪一側不允許其他浮動元素
在 CSS1 和 CSS2 中，這是通過自動為清除元素（即設置了 clear 屬性的元素）增加上外邊距實現的。在 CSS2.1 中，會在元素上外邊距之上增加清除空間，而外邊距本身並不改變。不論哪一種改變，最終結果都一樣，如果聲明為左邊或右邊清除，會使元素的上外邊框邊界剛好在該邊上浮動元素的下外邊距邊界之下
<html>
<head>
<style type="text/css">
img
{
float:left;
clear:both;
}
</style>
</head>
<body>
< img src="1.png" />
< img src="2.png" />
</body>
</html>
『貳』 web前端必備英語詞彙都在這兒了，客官你了解多少
appendChild 放置到某元素最後
attribute 屬性
addEventListener 添加偵聽器
assign 賦值
alert 彈出框
append 添加
appendTo 添加到
absolute 絕對的
active 活動的，激活的，標記的一個偽類
align 對齊
alpha 透明度，半透明anchor 錨記標記是這個單詞的縮寫
anchor 錨記<a>標記是這個單詞的縮寫
arrow 箭頭
auto 自動
appName 程序名
appCodeName 程序代號
appVersion 程序版本
appAgent 程序代理
abs 取絕對值
array 數組
back 超過范圍的三次方緩動
bounce 指數衰減的反彈緩動
before 在...之前
blur 當輸入框失焦的時候觸發
BOM 全稱Browser Object Model 瀏覽器對象模型
blur 失焦
bind 綁定
background 背景border 邊框
border 邊框
banner 頁面上的一個橫條both 二者都是clear 屬性的一個屬性值
both 二者都是clear 屬性的一個屬性值
black 黑色
bottom 底部，是一個CSS 屬性
blink 閃爍
box 盒子
block 塊
br 換行標記
blue 藍色
bug 軟體程序中的錯誤
body 主體，一個HTML 標記
building 建立
bold 粗體
button 按鈕
break 中斷
bool 布爾
boolean 布爾
bubble 冒泡
cubic 三次方的緩動
circular 圓形曲線的緩動
chain 當執行一種緩動效果後可以繼續使用另一個緩動效果
createElement 創建新元素
createTextNode 創建文本節點
childNodes 返回子節點
cancelBubble 刪除冒泡
click 點擊事件
change 內容發生改變，並失焦後才觸發該事件
contextmenu 右擊事件
clientX 游標相對於該網頁的水平位置
clientY 游標相對於該網頁的垂直位置
close 關閉當前頁面
confirm 輸入框
clientWidth 獲取元素寬度
clientHeight 獲取元素的高度
childNodes� 獲取所有子節點�
children 返回子元素
cloneNode 復制節點
Clone 克隆、復制
chekbox 復選框
cell 表格的單元格
color 顏色
center 中間，居中
connected 連接的
contact 聯系
child 孩子
content 內容
circle 圓圈
crosshair 十字叉絲
class 類別
css 層疊樣式表
clear 清除
cursor 滑鼠指針
cm 厘米
centimeter 厘米
continue 繼續
close 關閉
ceil 向上取整
charAt 獲取某位置字元
DOM 全稱Document Object Model 文檔對象模型
default 不執行
DOMMouseScroll 在火狐瀏覽器中的滾輪事件
document 文件，文檔
dbclick 雙擊
dashed 虛線
display 顯示，CSS 的一個屬
decimal 十進制
division 分區，div 就是這個單詞的縮寫
decoration 裝飾
document 文檔
default 默認的
definition 定義
dotted 點線
double 雙線
design 設計
do 做
exponential 指數曲線的緩動
elastic 指數衰減的正弦曲線緩動
error 錯誤 過失
element 元素
else 否則
focus 當輸入框聚焦的時候觸發
firstChild 第一個子節點
firstElementChild 返回第一個標簽節點
function() 函數
father 父親
float 浮動
filter 濾鏡，過濾器
font 字體
first 第一個
for 在循環語句中的一個保留字
fixed 固定的
four 4 個
function函數，功能
getAttribute 獲取屬性
getElementsByClassName 根據class標簽獲取元素
getElementsByName� 通過元素的Name屬性值
getElementById� 通過元素Id，唯一性
getElementsByTagName 通過標簽名查找元素
gif 一種圖像格式
green 綠色
gray 灰色
history 對象
host 主機
height 高度
hover 盤旋;徘徊;猶豫
hidden() 隱藏
hack 常用於CSS 中的一些招數，或者類似於偏方的技巧
here 這里
hand 手
hidden 被隱藏
head 頭部
home 首頁
height 高度
horizontal 水平的
help 幫助
hover 滑鼠指針經過時的效果，或稱為「懸停狀態」
input 當輸入的時候實時觸發
innerHeight 內部高度
innerWidth 內部寬度
in 從0開始加速的緩動
inOut 前半段從0開始加速，後半段減速到0的緩動
infinity 無線循環
insertBefore 插入到某元素前
image 圖像
inline 行內
important 重要的
inner 內部的
indent 縮進
italic 義大利體，斜體
index 索引
if如果
int：整數
indexOf：判斷某字元的首次位置
jpg 一種圖像格式justify 兩端對齊
justify 兩端對齊
keyCode 按鍵編碼
keydown 按下按鍵
keyup 按下按鍵抬起
linear 勻速
lastChild� 返回最後一個子節點
lastElementChild� 返回最後一個標簽節點�
language 語言
line 線
last 最後一個
link 鏈接
left 左邊
list 列表
length 長度
lowercase 小寫
level 級別
mouseover 移動到元素上
mouseout 從元素上移開
mousemove 移動滑鼠
mousewheel 在其他瀏覽器的滾輪事件
mousedown 滑鼠按下事件
mouseup 滑鼠抬起事件
margin 外邊距
millimeter 毫米
max 最大的
min 最小的
medium 中間
model 模型
menu 菜單
move 移動
middle 中間
nextElementSibling 返回下一個兄弟元素
nextSibling 返回下一個兄弟節點
nextElementSibling� 下一個兄弟元素
nodeValue 節點值
nodeType 節點類型
nodeName 標簽名稱
navigation 導航
none 無，不，沒有
new 新的
normal 標准
number 數字
null 空，空值
new 新建
outerHeight 整個高度
outerWIdth 整個寬度
open 打開新頁面
onscroll 窗口滾動事件
onresize 窗口大小監聽事件
onload 圖片載入事件
offsetLeft 獲取元素距離左側的距離�
offsetTop 獲取元素距離頂部的距離
offsetWidth 獲取元素自身寬度
offsetHeigh 獲取元素自身高度�
onload 在裝載時
onclick 在點擊時
ondblclick 在雙擊時
onmouseover 在滑鼠進入時
onmouseout 在滑鼠離開時
onmousemove 在滑鼠移動時
onmousedown 在滑鼠按下時
onmouseup 在滑鼠抬起時
onkeydown 在按鍵按下時
onkeyup在按鍵抬起時
onkeypress 在按鍵時
onsubmit 在提交時
onchange 在改變時
onfocus 在獲得焦點時
onblur 在失去焦點時
onscroll 窗口滾動事件
onresize 窗口大小監聽事件
out 減速到0的緩動
onStart 開始事件
onComplete 完成事件
onStop 停止事件
onUpdate 更新事件
object 對象
optional 可選的
oblique 一種斜體
orange 橙色
one 一個
outer 外面的
only 僅僅
overflow 溢出
open 打開
previous 前一個
prevent 阻止
pageX 游標相對於該網頁的水平位置
pageY 游標相對於該網頁的垂直位置
port 埠
protocol 協議
prompt 提示框
parentNode 返回父級節點
parentElementNode 獲取已知節點的父節點
previousSibling 返回上一個兄弟節點
previousElementSibling 返回上一個兄弟元素
password 密碼
position 位置
prepend 預先
padding 內邊距
progress 進度
point 點
public 公開的
pointer 指針，指示器
purple 紫色
position 定位，位置
pop 彈出
push 壓入
open 打開
option 選項
quadratic 二次方的緩動
quintic 五次方的緩動
quartic 四次方的緩動
querySelector 根據標簽名獲取第一個元素
querySelectorAll 獲取所有標簽名的元素
repeat 次數
remove 刪除當前節點
replaceChild 替換節點
removeEventListener 取消偵聽器
reload 刷新
removeAttribute 刪除屬性
removeChild 刪除父節點的某個子節點
radio 視頻
red 紅色
resize 重新設置大小
relative 相對的
right 右邊
repeat 重復，平鋪
row 行
replacement替換
return 返回
random 隨機
round 取整
sinusoidal 正弦曲線的緩動
start 開始
stop 停止
setinterval 時間函數
sibling 兄弟
scrollTop 獲取文檔滾動高度
screenX 游標相對於該屏幕的水平位置
screenY 游標相對於該屏幕的垂直位置
setAttribute 設置屬性
scrollHeight 獲取文檔整體高度
scrollTop 獲取文檔滾動高度
scrollLeft 元素左邊界
setAttribute 設置節點上的屬性
submit 提交
scroll 滾動
shadow 陰影
silver 銀色
special 特殊的
size 尺寸
square 方塊
solid 固體，實線
static 靜態的
solution 方案
strong 強壯，加粗的
son 兒子
style 樣式
span 一個HTML 標記
switch 切換
setInterval 設置反復性定時器
setTimeout 設置一次性定時器
srcElement 源對象，事件源
split 分割
substr 截取字元串
substring 截取字元串
sqrt 取開方
status 狀態
sort 排序
slice 切片，劃分
splice 鉸接，粘接
textContent 文本添加文字
table 表格
title 標題
td 單元格的HTML 標記
top 頂部
toLowerCase 轉換為小寫
toUpperCase 轉換為大寫
text 文本
tr 表格中「行」的HTML 標記
thick 粗的
transitional 過渡的
thin 細的
two 兩個
three 三個
type 類型
through 穿過
this 這個，當前
typeof 類型
underline 下劃線
uppercase 大寫
upper 上面的
url 網址
vertical 豎直的
visited 訪問過的
var 定義變數
wrap 包裹
window 窗口
white 白色
width 寬度
while 當...的時候
write 寫入
yellow 黃色
『叄』 web前端工程師工作中遇到難以解決的問題
1）.margin-top,margin-bottom不能正常顯示時
一.有時會遇到外層中的子層使用margin-top不管用的情況；這里我們需要在子層的前後加上一個
div{height:0;overflow:hidden;}
例
CSS樣式表中：
#box {background-color:#eee;}
#box p {margin-top: 20px;margin-bottom: 20px;text-align:center;}
解決方法：在P標簽前後各加2個空的div：<divstyle="height:0;overflow:hidden"></div>
二.網頁中頭部，中部，底部的居底部有時給個margin-bottom:10px;不管用也是要給個清除屬性的.clear{clear:both;font-size:0;line-height:0;}在底部<div id="footer"></div>下加個<div></div>
2）.div層中高度自適應問題
網頁前端科技人員在設計網頁時不可能知道客戶在要他們自己的網站內容頁里加多少文字或圖片內容
這時我們就不能規定div層的高度，為此應寫成min-height:200px;height:auto!important;height:
200px;overflow:visible;這樣ie7,ff,ie6瀏覽器的高度自適應問題就解決了，這些在
http://www.xueshengshu.com/網站中用到最多了。
3）.div層中子層的居底部對齊問題
div中的定位問題有很多也很麻煩，但弄懂了就OK了，在一個大的div層中如何讓子層的內容居底部
對齊就涉及到了position定位問題；
例
div層#box{position:relative;border:1px solidred;width:600px;hegiht:400px;}
div子層#box .wrap{position:absolute;bottom:0;border:1px dashedblue;width:200px;height:
100px},最近寫的網站中http://www.msgc.net.cn/就用到了
4）.div層中清除clear屬性的一小部分應用
在div中一個大的層裡面有很多子層，若是加上邊框在ie7、ie6中或許會正常顯示，但是在ff中可能
只會成一條線了，此時在最外層的後面加上<div style="clear:both"></div>或者設 .wrapfix:after{
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}後在每個浮動外框調用wrapfix；http://www.xueshengshu.com學生書網里用到最多了。
5）.解決IE8下div移位、錯位等兼容性問題
在<head>標簽後面的第一句話加上<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />就OK了
6）.單行文字居中與字體樣式問題
在div中一個層中只有一行文字，要讓這層中的文字居中，可設line-height的高度和層的高度一樣，注意這一層中的文字不能換行，此外，設了line-height時再給定字體樣式font:bold 14px "宋體";這時要把font:bold 14px "宋體";放在line-height的前面，否則字體樣式不顯示文字也不居中；或者將font:bold 14px "宋體";改成font-size:16px;font-weight:bold;font-family:"宋體";就OK了。
7）.滑鼠滑上去的特殊效果
往往為了達到顯眼的效果，我們會寫到一些好看的效果，方法一在樣式表中寫：ul li a{border:1px solid red;}ul li a:hoverimg{filter:alpha(opacity=40在ul標簽中調用即可方法二：在樣式表中寫上：.hover img{filter:alpha(opacity=40);}在div中調用onmouseover="this.className='hover'"onmouseout="this.className=this.classtype"即可
8）.IE6中高度不對問題
今天在div中給定了高度為1px,其它瀏覽器顯示正常，可是ie6中顯示的高度就不對了，這時我給樣式表中加了個font-size:0px;line-height:0px;就好了
9）.ul在外框里margin-top不起作用的問題
在div大框子里用了ul作導航的時候為了合ul層居中顯示，設ul的樣式表為margin-top:-15px不起作用了，此時應該將div大框設定高度後給個line-height與height一樣的高度，ul層就自動居中了。
例如http://www.hopes-home.cn/main.aspx
10）.ff中margin-top有時不起作用的問題
今天頭暈腦漲的把這問題給解決了，這幾天寫標網都有累似問題，可是一直都是換個寫法解決的，今天的這個辦法也不只可行試試還是可以的，在一個div外框層中給個寬度例如，#div_wrap{width:280px;height:100%;}
其次在這個框子里設一個.div_top{widh:100%;font:bold12px "宋體";height:24px;line-height:24px;}
.div_center{border:1px solid#dbdbdb;border-top:none;background:#fff;min-height:460px !important;height:auto!important;height:460px;overflow:visible;}
最後在這個div_center里套個ul li時經常會在ff中出問題，也就是在div_top與div_center中莫名的多了幾個像素的空格，這時給ul樣式表設個display:inline-table即可；
『肆』 CSS規則"clear: both"有什麼作用
clear屬性用來指定的浮動元件不允許浮動該哪一側；它設置或返回元素相對於浮動對象的位置。而"clear: both"用於設置在左右兩側均不允許浮動元素。
原文地址： CSS規則"clear: both"有什麼作用？
當不需要與指定元素相關的任何元素在左右浮動，並且僅在下面顯示時，就可以使用該"clear: both"規則。該規則還表明沒有其他元素佔用左右兩邊的空間。
語法：
示例：
效果圖：
瀏覽器支持：
●Google Chrome
●Internet Explorer
●Firefox
●Opera
●Safari
推薦閱讀：
java基礎教程
layui框架
go語言教程
『伍』 css中clear屬性是什麼意思
clear 屬性規定元素的哪一側不允許其他浮動元素。
clear有四個屬性值，分別是left（在左側不允許浮動元素）、right（在右側不允許浮動元素）、both（在左右兩側均不允許浮動元素）、none（默認值。允許浮動元素出現在兩側）、inherit（規定應該從父元素繼承 clear 屬性的值）。
『陸』 HTML的float與clear問題
float 屬性定義元素在哪個方向浮動。
其屬性有：
float：left；
float：right；
float：none；
float：inherit；
--------------------------------
left 元素向左浮動。
right 元素向右浮動。
none 默認值。元素不浮動，並會顯示在其在文本中出現的位置。
inherit 規定應該從父元素繼承 float 屬性的值。
-------------------------------------------------------------
clear 屬性定義了元素的哪邊上不允許出現浮動元素。
其屬性有：
left 元素向左浮動。
right 元素向右浮動。
none 默認值。元素不浮動，並會顯示在其在文本中出現的位置。
inherit 規定應該從父元素繼承 float 屬性的值。
『柒』 html的clear both含義
clear:both在css里是清除左右兩邊浮動的意思。
如果前面的DIV盒子里用到了浮動，那麼在編寫下一個DIV盒子之前，應該在前面加上<div style="clear:both"></div>，這樣才能清除掉前面DIV盒子浮動帶來的影響。
clear屬性值：
left 清除該元素 左邊的浮動元素。俗一點就是說誰設置了clear：left屬性，誰的左邊就不允許存在浮動的元素
right 清除該元素 右邊的浮動元素。俗一點就是說誰設置了clear：right屬性，誰的右邊就不允許存在浮動的元素
both清除兩邊的浮動 ，清除該元素 左右邊的浮動元素。俗一點就是說誰設置了clear：both屬性，誰的左右邊 都不允許存在浮動的元素
none，就是不做任何處理，不清除任意一邊的浮動元素
inherit，就是讓它跟隨父元素的屬性值，父元素如何設置清除，它就如何設置清除。
(7)web中clear屬性擴展閱讀
CSS為HTML標記語言提供了一種樣式描述，定義了其中元素的顯示方式。CSS在Web設計領域是一個突破。利用它可以實現修改一個小的樣式更新與之相關的所有頁面元素。
CSS特點：
豐富的樣式定義
CSS提供了豐富的文檔樣式外觀，以及設置文本和背景屬性的能力；允許為任何元素創建邊框，以及元素邊框與其他元素間的距離，以及元素邊框與元素內容間的距離；允許隨意改變文本的大小寫方式、修飾方式以及其他頁面效果。
易於使用和修改
CSS可以將樣式定義在HTML元素的style屬性中，也可以將其定義在HTML文檔的header部分，也可以將樣式聲明在一個專門的CSS文件中，以供HTML頁面引用。總之，CSS樣式表可以將所有的樣式聲明統一存放，進行統一管理。
另外，可以將相同樣式的元素進行歸類，使用同一個樣式進行定義，也可以將某個樣式應用到所有同名的HTML標簽中，也可以將一個CSS樣式指定到某個頁面元素中。如果要修改樣式，我們只需要在樣式列表中找到相應的樣式聲明進行修改。
多頁面應用
CSS樣式表可以單獨存放在一個CSS文件中，這樣我們就可以在多個頁面中使用同一個CSS樣式表。CSS樣式表理論上不屬於任何頁面文件，在任何頁面文件中都可以將其引用。這樣就可以實現多個頁面風格的統一。
『捌』 clear屬性不起作用，需要的效果是兩個div都浮動，且各佔一行
1、各佔一行就別浮動，畫蛇添足
2、非要浮動且各佔一行，那就在他們中間加個div 設置clear:both就行了
你的代碼中clear之所以不起作用是因為，加在本層中且clear：right了
『玖』 clear屬性怎麼回事啊
是因為clear只清除使用clear上邊的float效果。
如果想要在同一行 a b 都要用float，並且b不能用clear。
下邊這個代碼是我親自手打並測試後的效果。
<html>
<head>
<style type="text/css">
.use_float{float:left;}
.float1{height:100px;width:100px; background:pink;}
.float2{height:150px;width:150px; background:blue;}
.float3{height:200px;width:200px; background:green;}
.float4{height:250px;width:250px; background:black;}
.float5{height:300px;width:300px; background:orange;}
.float6{height:350px;width:100px; background:#aeaeae;
float:right;}
.use_clear{ clear:left; /*-----把這里的left換成right試試-----*/ height:10px; width:100%; border:1px solid red; background:red;}
</style>
</head>
<body>
<div class="use_float float1"></div>
<div class="use_float float2"></div>
<div class="use_float float3"></div>
<div class="use_float float4"></div>
<div class="use_float float5"></div>
<div class="use_float float6"></div>
<!---------------------------------上邊用float---------------------------->
<div class="use_clear"></div>
</body>
</html>