前端学习（100）：float注意点整理1
生活随笔
收集整理的這篇文章主要介紹了
前端学习（100）：float注意点整理1
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
1只會影響后面得元素
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>float浮動</title><style>body{border:1px solid red}#box1{width: 100px;height: 100px;background: yellow;}#box2{width: 200px;height: 200px;background: red;float: left;}#box3{width: 300px;height: 300px;background: black;}</style> </head> <body><div id="box1"></div><div id="box2"></div><div id="box3"></div> </body> </html>運行結果
內容保存為兩層
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>float浮動</title><style>body{border:1px solid red}#box1{width: 100px;height: 100px;background: yellow;}#box2{width: 200px;height: 200px;background: red;float: left;}#box3{width: 300px;height: 300px;background: black;}</style> </head> <body><div id="box1"></div><div id="box2"></div><div id="box3">文字文字文字文字文字文字文字</div> </body> </html>運行結果
?默認寬根據內容決定
換行排序
總結
以上是生活随笔為你收集整理的前端学习（100）：float注意点整理1的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： python 的钻石继承问题
- 下一篇： 前端学习（495）：嵌入代码与外部文件和