CSS浮动

内容

div

div大小、背景设置

div溢出处理

• overflow属性

边框、轮廓

• border属性
• outline属性

盒子模型

• box model

• box-sizing属性

行内元素和块级元素

• 行内元素不会独占一行,相邻的行内元素会排列在同一行里,直到一行排不下,才会换行,其宽度随元素的内容而变化
• 块级元素会独占一行,默认情况下,其宽度自动填满其父元素宽度
• 块级元素常见的有：div......行内元素常见的有：a，span

区别：

• 块级元素可以设置width,height属性
• 行内元素设置width,height属性无效，它的长度高度主要根据内容决定
• 块级元素即使设置了宽度,仍然是独占一行
• 块级元素可以设置margin和padding属性
• 行内元素的margin和padding属性,水平方向padding-left,padding-right,margin-left margin-right都产生边距效果, 但竖直方向的padding-top,padding-bottom,margin-topmargin-bottom却不 会产生边距效果
• 块级元素对应于display:block
• 行内元素对应于display:inline

浮动

• 浮动类似CAD中图层

定位机制

float属性

float包裹和崩溃

• 崩溃 = 子元素设置为浮动，父元素没有设置高度，父一级的块级元素高度发生了破坏。
• 包裹 = 子元素若没有设置宽度，默认为父元素的宽度，此时若子元素设置为float，则宽度自动改为内容的宽度

float其他特性

• 注意div与div元素和div和p元素浮动的区别

清除浮动

/* 方法一 */
#div{
    clear: both;
}

/* 方法二 */
#clearDiv::after{
    content: "";
    visibility: hidden;
    height: 0px;
    display: block;
    clear: both;
}