firefox 中文论坛有人问此问题，old9 的回答很有意思。我想这个例子有助于理解 float 的真正含义。

“#middle定宽之后，横向宽度空余(100-150=-50)已经容不下#middle中的文字了，所以向y方向拓展，也就是Firefox里面的效果。”

你可以尝试将 div#middle {width:200px}，观察效果。

</p> <style> <p>div#left {</p> <p> float: left;</p> <p> width: 150px;</p> <p> height:100px;</p> <p> background-color: red;</p> <p>}</p> <p>div#right {</p> <p> background-color: lime;</p> <p> float: right;</p> <p> width: 150px;</p> <p>}</p> <p>div#middle {</p> <p> background-color: silver;</p> <p> width:100px;</p> <p>}</p> </style> <div id="left">left</div> <div id="right">right</div> <div id="middle">center</div> <p> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

以下为引用内容:

---

#middle定宽之后，横向宽度空余(100-150=-50)已经容不下#middle中的文字了，所以向y方向拓展，也就是Firefox里面的效果。

但是在IE里面，一旦给#middle设定宽度，就会触发IE的一个神奇属性(haslayout)从而引发出种种奇怪的bug，具体到这里就体现在#middle居然有了个左边距，大小就是#left的宽度（确切的说是宽度+3）。

所以设置#middle的宽度为100那么它会在left右面形成一个100px宽的block，而不是下方。

如果要达成统一效果，要么不设定宽度，如果一定要设定就用一些CSS hack吧针对IE做一些处理吧。

关于IE的haslayout，这篇文章不错，看看可能会理解更深刻一些：

http://www.satzansatz.de/cssd/onhavinglayout.html

另外这个是一个三列布局的例子（来自w3cn）：

http://www.w3cn.org/article/layout/2004/csslayout/threebox2.html

---

关于 javascript 特点很有意思的文章，目前似乎还没有中文翻译。看了一下，我看我还是算了吧，我不是程序员，很多专业的说法我说不出来，还是简单注释（点评）一下吧。

via http://javascript.infogami.com/Javascript_in_Ten_Minutes

Basic Types

Javascript 是弱类型语言，在需要的时候，变量类型会自动转换。比如

</p> <p><script type="text/javascript"></p> <p>var someNumber = 1;</p> <p>var anotherNumber = 3.5;</p> <p>var stringValue = "This is a string ";</p> <p>var sqString = 'This is also a string';</p> <p>someNumber += stringValue; // "1This is a string " - JS is weakly typed</p> <p>alert(someNumber)</p> <p></script></p> <p> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

Javascript is a dynamically and weakly typed language. Variables are declared with the keyword var, and the type of the variable is inferred at run-time. Common simple types, such as Number, String, and Boolean are supported. The most important type however is the Object type; almost everything in Javascript is an object.

Unlike Python, Javascript is weakly typed: values are implicitly converted as needed.

Arrays

JS数组可以是任意类型的数值，数组长度可实时改变。

var emptyArray = [];

var homogeneousArray = [1, 2, 3];

var heterogeneousArray = ["one", 2, 3.0];

Javascript has built-in Array objects. Arrays in Javascript are different from C or Java arrays - a Javascript array is actually a collection of arbitrary values. The values don’t have to be of the same type, and the array length may change at run time.

Many utility methods are available on arrays, for example:

</p> <p><script type="text/javascript"></p> <p>var a = [3,2,1];</p> <p>a.push(7); // [3,2,1,7]</p> <p>alert(a);</p> <p>a.sort(); // [1,2,3,7]</p> <p>alert(a);</p> <p>alert(["a", "b"].indexOf(”b”)); // 1</p> <p></script></p> <p> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

注:opera 9 8238不支持 alert(["a", "b"].indexOf(”b”));

可以用中括号或者 new Array(1,2,3) 来创建数组

Arrays can be created with the bracket notation [] or using the Array constructor (e.g. new Array(5) or just Array(1,2,3)).

Objects

对象，是组形式的数据对。Java 中叫 Map，Python 叫 dictionary。

var emptyMap = {};

var homogeneousMap = {”one”: 1, “two”: 2, “three”: 3};

var heterogeneousMap = {”one”: 1,

“two”: “two”,

“three”: 3.0};

One of the most important concepts in Javascript is the “object”. Each object is basically a set of key-value pairs. It is called a Map in Java, hash (perl), or dictionary (Python).

Keys can be arbitrary strings, values can be anything.

Objects can be created, in particular, using the {} literal notation, using the Object and other contructors with the new operator:

用大括号或者 new 操作符来创建对象

</p> <p><script type="text/javascript"></p> <p>var simpleObject = {a:1}, emptyObject = new Object();</p> <p>var dateObject = new Date();</p> <p>alert(simpleObject);</p> <p>alert(emptyObject);</p> <p>alert(dateObject);</p> <p></script></p> <p> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

Properties access

对象属性访问。用. 语法或者中括号 [] 下标语法访问属性。

</p> <p><script type="text/javascript"></p> <p>var emptyMap = {};</p> <p>var homogeneousMap = {"one": 1, "two": 2, "three": 3};</p> <p>var heterogeneousMap = {"one": 1,</p> <p> "two": "two",</p> <p> "three": 3.0};</p> <p>// Dot notation property access</p> <p>window.alert("homogeneous map property "one" "</p> <p> + homogeneousMap.one);</p> <p>// Subscript notation property access</p> <p>var prop = "two";</p> <p>window.alert("homogeneous map property "two" "</p> <p> + homogeneousMap[prop]);</p> <p></script></p> <p> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

Properties assignment

属性赋值

Similarly, you can assign to properties of an object:

homogeneousMap["red blue"] = 10;

homogeneousMap.two = 20;

Properties removal

删除属性

delete homogeneousMap["one"];

delete homogeneousMap.two;

Iteration

遍历。用 for [color#c00]key[/color] in [color#c00]Object[/color] 语句

</p> <p><script type="text/javascript"></p> <p>var heterogeneousMap = {"one": 1,</p> <p> "two": "two",</p> <p> "three": 3.0};</p> <p>for (var key in heterogeneousMap) {</p> <p> window.alert("heterogeneous map property ""</p> <p> + key</p> <p> + "" = "</p> <p> + heterogeneousMap[key]);</p> <p>}</p> <p></script></p> <p> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

Only iterates over enumerable properties. For example, length is a property of an array, but a for..in loop doesn’t iterate over it:

for…in 用于可枚举的属性而不是length。

</p> <p><script type="text/javascript"></p> <p>var arr = ["a","b"]; alert(arr.length); // 2</p> <p>for(var prop in arr) alert(prop); // alerts 1 and 2.</p> <p></script></p> <p> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

Functions

函数是对象的一种形式。能够动态地创建、存储、传输以及返回值。

Functions are first-class objects. That means that they can be created dynamically, stored, passed and returned just like any other value.

</p> <p><script type="text/javascript"></p> <p>var callable = function (message) { // <-- notice assignment</p> <p> window.alert("Callable called with message = "</p> <p> + message);</p> <p>}</p> <p>function callCallable(f, x) {</p> <p> f(x);</p> <p>}</p> <p>callCallable(callable, "Hello world!");</p> <p></script></p> <p> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

Closures are supported:

</p> <p><script type="text/javascript"></p> <p>function createClosure(initial) {</p> <p> var res = function () {</p> <p> initial = initial + 1;</p> <p> window.alert("Closure with modified state "</p> <p> + initial);</p> <p> }</p> <p> return res;</p> <p>}</p> <p>var f = createClosure(1);</p> <p>f(); f(); // alerts 2 and 3</p> <p></script></p> <p> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

OOP in Javascript

javascript 中的面向对象方法

function MyObject(name, value) {

this.name = name;

this.value = value;

}

Javascript’s object system is prototype-based, meaning it is very different from the conventional OO languages like Java or C++. Not a class type but an object constructor is created for new objects with particular properties. In the example above the this keyword used to reference the instance of the object being created. The this object is essentially a property map with members accessed (and initialized) in this example with the dot notation.

The object constructor, MyObject, is an object constructor not in how it’s defined, which looks like any other Javascript function, but in how it’s ”invoked”.

var my = new MyObject(”foo”, 5);

The new operator before the function invokes the function with a newly construced object as this and returns that the initialized object.

Object Prototype

Part of what makes a language object oriented is that data not only has properties but also ”behaviors”. Also known as: member functions; methods; and object messages. To implement a member function in Javascript one would be tempted to write something like what’s below based on the member initialization exampled above.

function BadObject(data) {

this.data = data

this.memberFunction = function () {

// …functions on data…

}

}

While the code above will work without error, it does create a new closure for each member function for each new instance of the object. What’s really required is a class level function that works on instance data. But remember, Javascript objects aren’t class based but prototype based. So how to we implement “class” level member functions? (Skip to Implementation) Better yet, how do we implement “class” level members functions in general?

Enter the prototype member.

The internal object member, prototype, has language defined significance in that it is used for resolving property names if the property isn’t found in the current property map. It’s considered internal because, while the instance’s prototype member is ”inherited” from the ”constructor’s” prototype member, it cannot be accessed directly from the object instance itself. The defined prototype member is a property map itself which holds members for property name resolution. Consider the example below:

var parentPropertyMap = {”bar”: “I’m the bar”};

// Define the constructor with inheritable properties

function ChildObject(foo) {

this.foo = foo;

}

ChildObject.prototype = parentPropertyMap;

childPropertyMap1 = new ChildObject(”I’m the foo1″);

childPropertyMap2 = new ChildObject(”I’m the foo2″);

// Prints “childPropertyMap1.foo = I’m the foo1″

window.alert(”childPropertyMap1.foo = ” + childPropertyMap1.foo);

// Prints “childPropertyMap2.foo = I’m the foo2″

window.alert(”childPropertyMap2.foo = ” + childPropertyMap2.foo);

// Prints “childPropertyMap1.bar = I’m the bar”

window.alert(”childPropertyMap1.bar = ” + childPropertyMap1.bar);

// Prints “childPropertyMap2.bar = I’m the bar”

window.alert(”childPropertyMap2.bar = ” + childPropertyMap2.bar);

The member foo is an instance member added to the

instance’s property map during construction:

function ChildObject(foo) {

this.foo = foo;

}

while bar is in the constructor’s prototype:

var parentPropertyMap = {”bar”: “I’m the bar”};

…

ChildObject.prototype = parentPropertyMap;

which is ”inherited” during the new operation:

childPropertyMap1 = new ChildObject(”I’m the foo1″);

childPropertyMap2 = new ChildObject(”I’m the foo2″);

In other words, the member, bar, is shared across all instances of ChildObject.

Therefore, by implementing the prototype member of the constructor function, we can think of the constructor function itself as the “class” object. Complete with static class functions:

function ClassObject() {}

ClassObject.staticClassFunction = function(x) {

return x * 2;

}

static class variables:

function ClassObject() {}

ClassObject.staticClassVariable = 5;

shared member variables:

function ClassObject() {}

ClassObject.prototype.sharedMember = 5;

and of course, shared member functions:

function ClassObject(x) {

this.x = x;

}

ClassObject.prototype.memberFunction = function(x) {

return x * this.x;

}

Member Function Implementation

function Message(message) {

this.message = message;

}

Message.prototype.show = function() {

window.alert(”Message.show() with message = ”

+ this.message);

}

(More on Classes and Objects)

Example Code

下面是本文提到的所有例子

//////////////////////////////////////

// Basic Types

var intValue = 1;

var floatValue = 3.0;

var stringValue = “This is a string
“;

///////////////////////////////////////

// Array

var emptyList = [];

var homogeneousList = [1, 2, 3];

var heterogeneousList = ["one", 2, 3.0];

///////////////////////////////////////

// Property Map

//

var emptyMap = {};

var homogeneousMap = {”one”: 1, “two”: 2, “three”: 3};

var heterogeneousMap = {”one”: 1,

“two”: “two”,

“three”: 3.0};

///////////////////////////////////////

// Functions as values

//

var callable = function (message) { // <-- notice assignment

window.alert("Callable called with message = "

+ message);

}

function createClosure(initial) {

var res = function () {

initial = initial + 1;

window.alert("Closure with modified state "

+ initial);

}

return res;

}

///////////////////////////////////////

// Functions as arguments

//

function callCallable(f, x) {

f(x);

}

function composeCallables(f, g, x) {

f(g(x));

}

///////////////////////////////////////

// Objects

//

function MyObject(name, value) {

this.name = name;

this.value = value;

}

///////////////////////////////////////

// Objects with Member Functions

//

function Message(message) {

this.message = message;

}

Message.prototype.show = function() {

window.alert("Message.show() with message = "

+ this.message);

}

///////////////////////////////////////

// Demo Utilities

//

function quote(message) {

return """ + message + """;

}

///////////////////////////////////////

// HTML Invoked demonstration

//

//

function main() {

window.alert(”Integer = ” + intValue);

window.alert(”Float = ” + floatValue);

window.alert(”String = ” + stringValue);

for (var item in emptyList) {

window.alert(”Empty list item = ” + item);

}

// Script style index iteration

for (var i in homogeneousList) {

window.alert(”homogeneous list item = ”

+ homogeneousList);

}

// C style index iteration

for (var x=0; x < heterogeneousList.length; ++x) {

window.alert("heterogeneous list item = "

+ heterogeneousList[x]);

}

// Ruby-ish style index iteration

function each(a, f) {for(var x=0; x < a.length; x++) f(a[x])};

each(heterogeneousList, function(e) {

window.alert("heterogeneous list item = " + e);

})

// Dot notation property access

window.alert("homogeneous map property "one" "

+ homogeneousMap.one);

// Subscript notation property access

window.alert("homogeneous map property "two" "

+ homogeneousMap["two"]);

for (var key in heterogeneousMap) {

window.alert("heterogeneous map property ""

+ key

+ "" = "

+ heterogeneousMap[key]);

}

callable("(Function value invoked)");

closure();

closure();

callCallable(closure);

composeCallables(callable, quote, "My Message");

var my = new MyObject("foo", 5);

window.alert("MyObject my.name = " + my.name);

window.alert("MyObject my["value"] = " + my["value"]);

var msg = new Message("bar");

for (var key in Message.prototype) {

window.alert("Message prototype member ""

+ key

+ "" = "

+ Message.prototype[key]);

}

window.alert("Message msg.message = " + msg.message);

msg.show();

}

[Edit on 2006-3-4 11:41:18 By guoshuang]

[Edit on 2006-3-6 11:31:11 By guoshuang]