父元素設定的紅色並沒有顯示出來，因為他的高度變成了 0。
此時父級元素高度坍塌了。
1.為父元素設定高度
.box
這個方法並不好，當要調整子級元素時，父級元素也有相應的做調整。
2.給父元素也新增浮動。這種方法可以讓父元素顯示出來，可是當新增不浮動的子元素時會影響其顯示。
.box
**4.**可以通過偽類來實現父元素的顯示。
.box
.box::after
此方法是個高階方法，不會對後續新增元素有影響。
5 在浮動元素後面設定乙個元素清除浮動
"box"
>
"box1"
>
"box1"
>
"box2"
>
"clear:both;"
>
<
!-- 在浮動元素後設定乙個元素清理浮動-->
position的屬性有：
static 是預設布局，設定top\left。屬性不會有作用。
relative是相對布局，設定的top\left。會相對檔案中的控制項。
absolute是絕對定位，設定的top\left。會相對整個頁面而定。
fixed是相對瀏覽器視窗定位，設定的top/left屬性，是相對於瀏覽器視窗的位置。
inherit 規定應從父元素繼承position。
static對其他的遮蓋層沒有影響
現在我測試 absolute,relative fix
我在網頁上簡單的弄了一幅圖，我想要他左圖右字。
"utf-8"
>
我的網頁
!-- 用float設定靠左 設定寬500px 不設定height 會隨width變化-->
我的第乙個網頁我的第乙個網頁
我的第乙個網頁我的第乙個網頁
我的第乙個網頁我的第乙個網頁
我的文字在裡了，顯然這不是我想要的排版，我想要的是左圖右字。
而且我的text-align:right;沒有生效，先刪除他。absolute是絕對的定位，
元素的位置通過left, top ,right bottom,進行定位的。
於是我開始修改。我的大小是500px 所以我把文字向右移動500px。
div
雖然看上去是我想要的左圖右字，但是在我縮小頁面的時候文字還是會重合在中，顯然absolute對元素進行了絕對定位，就算那塊地方有東西還是會強制在那顯示。
我試著用relative屬性來試試。我把text-align:right;刪去了 沒什麼用。
似乎又打回原形了，right:500px;沒有發揮出作用，它對應的是absolute。
所以我設定了讓元素浮動起來。
達到了我要的左圖右字了，可是字分太開不好看。我想要字挨緊。於是我把float中的right 改為了 left。
達到了我想要的效果，我還想要字型下降一些，可以用bottom和top來實現。
達到我想要的左圖右字了。
這些是我在一步步學習position時的歷程。
前端小白學習html的一些感悟和理解
為什麼會學習前端？座位一名即將畢業的準畢業生，面臨的是如何找好第乙份工作，這個問題驅使著我從0開始學習前端這門技術，因為新型冠狀病毒疫情的影響，今年的就業率令人堪憂，但是軟體行業就業率影響卻不是很大，醫療軟體行業大資料等方向變得更加熱門，大學所學專業本就是軟體工程，所以這也是我選擇學習前端的主要幾個...
HTML5的一些小概念
html5 是下一代 html 標準。html html 4.01的上乙個版本誕生於 1999 年。自從那以後，web 世界已經經歷了巨變。html5 仍處於完善之中。然而，大部分現代瀏覽器已經具備了某些 html5 支援。w3c 全球資訊網聯盟 我是乙個h1h1 我是乙個h2h2 我是乙個h5h5...
初學html的一些用法 一
1.checkbox的用法 網口2 表明有乙個名為epot2的checkbox，效果如圖 2.text文字控制資料大小 mtu 576 1492 表明乙個名為 userdefinedmtu的textbox，他的大小為 576 1492 效果如圖 3,table的隱藏方法 使用js函式 示例 我一共有...