1.布局:元素默认的排列方式,往往这种默认的文档流满足不了我们的需求,所以出现了浮动布局 等。
2.浮动布局:
- float —— 属性名
- 属性值:left 向左浮动 ;right 向右浮动;none 【默认值】,不浮动;inherit 继承父元素
- 目的: 浮动布局的主要用法是为了让块级元素在一行中显示(列级布局),或者让文字在图片的周围显示。浮动元素用来解决块级元素在X轴上的排列问题ted
- 使用方法:浮动布局通常出现在div这种父子结构中,为子元素添加浮动特性
- 特点:(脱离文档流) 1.当一个元元素是浮动元素的时候,他会失去对父元素的支撑
解决:清除浮动:1.给父元素添加overflow:hidden
2.使用伪元素 例:clear:both(left、right)
2.如果没有指定宽度,宽度由内容所决定
3.多个浮动元素在一行排列,如果放不下再换行
4.不再占据屏幕空间
<!DOCTYPE html>
<html lang&