方法一：margin-left/right實現
<!doctype html><html> <head> <meta charset="UTF-8"> <title>Document</title> <style> div { border:1px solid red; background:#eee; } img { width:200px; height:200px; float:left; } p { margin-left:200px; } </style> </head> <body> <div> <img src="1.jpg"> <p>box-shadow有個超屌的特性，就是陰影可以任意累加，因此，理論上我們可以使用box-shadow生成任意的圖片，包括張含韻妹子年輕時候的寫真，具體可參加“CSS3 box-shadow盒陰影圖形生成技術”一文。但是filter中的drop-shadow就只能抱歉了，我就是一錘子買賣。沒錢也這么任性！說到現在，體現的盡是drop-shadow的不好，兼容性不夠，內陰影不支持，多陰影也不支持；感覺就像是小蚯蚓，失戀了，工作也沒了，存在的意義好像就成了白富美的談資。真的是這樣嗎？顯然非也！所謂存在既有道理。rop-shadow有一個很厲害的特性，也就這一個特性，讓其以后有足夠的機會大放異彩！那就是，drop-shadow才是真正意義上的投影，而box-shadow只是盒陰影而已。</p> </div> </body></html>
方法二：padding-left/right實現
<!doctype html><html> <head> <meta charset="UTF-8"> <title>Document</title> <style> div { border:1px solid red; background:#eee; } img { width:200px; height:200px; float:left; } p { padding-left:200px; } </style> </head> <body> <div> <img src="1.jpg"> <p>box-shadow有個超屌的特性，就是陰影可以任意累加，因此，理論上我們可以使用box-shadow生成任意的圖片，包括張含韻妹子年輕時候的寫真，具體可參加“CSS3 box-shadow盒陰影圖形生成技術”一文。但是filter中的drop-shadow就只能抱歉了，我就是一錘子買賣。沒錢也這么任性！說到現在，體現的盡是drop-shadow的不好，兼容性不夠，內陰影不支持，多陰影也不支持；感覺就像是小蚯蚓，失戀了，工作也沒了，存在的意義好像就成了白富美的談資。真的是這樣嗎？顯然非也！所謂存在既有道理。rop-shadow有一個很厲害的特性，也就這一個特性，讓其以后有足夠的機會大放異彩！那就是，drop-shadow才是真正意義上的投影，而box-shadow只是盒陰影而已。</p> </div> </body></html>
方法三：overflow:hidden實現（BFC化）
<!doctype html><html> <head> <meta charset="UTF-8"> <title>Document</title> <style> div { border:1px solid red; background:#eee; } img { width:200px; height:200px; float:left; } p { border:1px solid green; overflow:hidden; } </style> </head> <body> <div> <img src="1t.jpg"> <p>box-shadow有個超屌的特性，就是陰影可以任意累加，因此，理論上我們可以使用box-shadow生成任意的圖片，包括張含韻妹子年輕時候的寫真，具體可參加“CSS3 box-shadow盒陰影圖形生成技術”一文。但是filter中的drop-shadow就只能抱歉了，我就是一錘子買賣。沒錢也這么任性！說到現在，體現的盡是drop-shadow的不好，兼容性不夠，內陰影不支持，多陰影也不支持；感覺就像是小蚯蚓，失戀了，工作也沒了，存在的意義好像就成了白富美的談資。真的是這樣嗎？顯然非也！所謂存在既有道理。rop-shadow有一個很厲害的特性，也就這一個特性，讓其以后有足夠的機會大放異彩！那就是，drop-shadow才是真正意義上的投影，而box-shadow只是盒陰影而已。</p> </div> </body></html>
方法四：float元素加margin（超出float元素高度后還是會出現環繞）
<!doctype html><html> <head> <meta charset="UTF-8"> <title>Document</title> <style> div { border:1px solid red; background:#eee; } img { width:200px; height:200px; float:left; margin-right:40px; } p { border:1px solid green; } </style> </head> <body> <div> <img src="1t.jpg"> <p>box-shadow有個超屌的特性，就是陰影可以任意累加，因此，理論上我們可以使用box-shadow生成任意的圖片，包括張含韻妹子年輕時候的寫真，具體可參加“CSS3 box-shadow盒陰影圖形生成技術”一文。但是filter中的drop-shadow就只能抱歉了，我就是一錘子買賣。沒錢也這么任性！說到現在，體現的盡是drop-shadow的不好，兼容性不夠，內陰影不支持，多陰影也不支持；感覺就像是小蚯蚓，失戀了，工作也沒了，存在的意義好像就成了白富美的談資。真的是這樣嗎？顯然非也！所謂存在既有道理。rop-shadow有一個很厲害的特性，也就這一個特性，讓其以后有足夠的機會大放異彩！那就是，drop-shadow才是真正意義上的投影，而box-shadow只是盒陰影而已。</p> </div> </body></html>
方法五：display:table-cell（兼容IE7及以下）
<!doctype html><html> <head> <meta charset="UTF-8"> <title>Document</title> <style> div { border:1px solid red; background:#eee; } img { width:200px; height:200px; float:left; } p { border:1px solid green; display:table-cell;//IE8+ BFC width:2000px; *display:inline-block;//IE7- 偽BFC *width:auto; } </style> </head> <body> <div> <img src="1t.jpg"> <p>box-shadow有個超屌的特性，就是陰影可以任意累加，因此，理論上我們可以使用box-shadow生成任意的圖片，包括張含韻妹子年輕時候的寫真，具體可參加“CSS3 box-shadow盒陰影圖形生成技術”一文。但是filter中的drop-shadow就只能抱歉了，我就是一錘子買賣。沒錢也這么任性！說到現在，體現的盡是drop-shadow的不好，兼容性不夠，內陰影不支持，多陰影也不支持；感覺就像是小蚯蚓，失戀了，工作也沒了，存在的意義好像就成了白富美的談資。真的是這樣嗎？顯然非也！所謂存在既有道理。rop-shadow有一個很厲害的特性，也就這一個特性，讓其以后有足夠的機會大放異彩！那就是，drop-shadow才是真正意義上的投影，而box-shadow只是盒陰影而已。</p> </div> </body></html>
方法六：負邊距實現
<!doctype html><html> <head> <meta charset="UTF-8"> <title>Document</title> <style> #left { background-color: green; float: left; width: 220px; margin-right: -100%; } #content { float: left; width: 100%; } #contentInner { margin-left: 220px; background-color: orange; } </style> </head> <body> <div id="left"> <h1>Left Sidebar</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> <div id="content"> <div id="contentInner"> <h1>Main content</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> </div> </body></html>