浮動元素的標準流問題
浮動元素讓出標準流以及字圍現象
總結:浮動元素沒有了標準流的margin塌陷現象,各自有各自的margin,不會相互塌陷。
標準流的元素都有自己的一個標準流位置,后面的元素只能在前面元素的后面進行加載。
浮動元素脫離了標準流,它會讓后面的元素占有自己的位置,顯示效果上仿佛是自己飄起來了,我們稱之為脫標了。
6.字圍現象
代碼如下:
```
*{
padding: 0;
margin: 0;
}
div{
width:600px;
border: 1px solid red;
margin:50px auto;
padding:10px;
}
div img{
width:230px;
height:300px;
margin:10px;
float:right;
}
</style>
</head>
<body>
<div>
<img src="./1.jpg" alt="宋小寶">
宋小寶,本名宋寶利,1981年1月5日出生于吉林省通化市輝南縣樓街鄉光明村 ,中國內地男演員,喜劇表演藝術家趙本山先生的第32位徒弟。
2009年,因參加綜藝節目《本山快樂營》小有名氣。2011年,因參演遼寧衛視春節晚會與師父趙本山合作小品《相親》而獲得更多關注。2012年8月,憑借電視劇《櫻桃》參加第四屆新農村電視藝術節獲最佳男主角 [2] 。同年12月10日,憑借電視劇《櫻桃》參加第八屆華鼎獎獲當代類最佳男演員。2013年10月,第十屆華鼎獎獲最受中國媒體歡迎的演員。2014年8月,憑借電視劇《櫻桃紅》參加第十三屆華鼎獎獲中國當代題材電視劇最佳男演員獎 [3] 。2015年參加中國首檔明星喜劇競賽真人秀《歡樂喜劇人第一季》 [4] 。同年11月5日,參加《咱們穿越吧》慶功會。同年12月9日,獻唱電影《唐人街探案》推廣曲《往事只能回味》。2016年12月13日,獻唱電影《東北往事之破馬張飛》主題曲《全世界都在說東北話》。
</div>
```
<p style="color:red">在同兄弟元素下,一個浮動,其中文字會有圍邊的效果。</p>
如圖所示:

- 簡介
- 文字三屬性(顏色,字號,字體)
- 盒子三屬性(width , height, background-color)
- CSS引入方法
- CSS選擇器
- css高級選擇器
- CSS的繼承性
- 顏色屬性color
- 字體font-family
- 字號font-size
- 文字在盒子行高 line-height
- 字體加粗font-weight
- 字體樣式font-style
- 文本段落對齊text-align
- 文字修飾(上劃線下劃線中劃線 text-decoration)
- 文字縮進text-indent
- 盒子模型的寬度與高度width,height
- 內邊距padding
- 邊框border
- 外邊距margin
- 清除默認樣式
- 盒子height高度屬性拓展
- 文字在盒子里居中text-align:center
- 盒子在盒子里的水平居中
- margin塌陷
- 標準文檔流display
- 浮動float
- 浮動元素性質
- 浮動貼邊原理
- 浮動元素的標準流問題(文字圍邊效果)
- 清除浮動
- 清除浮動影響二: clear屬性
- 清除浮動overflow方法
- 偽類標簽
- background-color背景顏色屬性
- background-image 背景圖片調用
- background-repeat 背景圖平鋪狀態
- background-position背景定位
- background-attachment背景附著
- background綜合語法
- 相對定位position:relative
- 絕對定位position:absolute
- 定位壓蓋順序
- CSS制作LOGO超鏈接妙招
- CSS公共類的繼承性
- em單位
- 媒體查詢
- flex布局