标准文档流与浮动
- 文字必须在div渲染之后写
- 标准文档流都是高低不齐,底边对齐
- 块级元素和行内元素划分
标准文档流将我们的html标签分成了块级标签和行内标签
块级标签:<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>
特点:①自己独占一行②可以设置宽高③如果嵌套的关系里不设置宽高会自动继承父盒子的宽高
行内标签:span buis strong em ins del。
特点:①会自动在本行内补齐②不可以设置宽高但是可以设置内边距和外边距③行内标签的宽高只能用内容撑开不能自动继承父级标签的宽高
- 有一个属性可以让块级元素和行内元素进行转换
display(显示模式):块级block,行内inline,行内块inline-block
小结:标准文档流布局还是有局限,脱离标准流三个方法:浮动,绝对定位,固定定位
浮动
让我们的元素在某一个方向并排排列
—属性值:left 和right
加入浮动效果之前p标签由于和div标签高度一样所以会溢出
加入左浮动效果之后
加入右浮动效果之后
同一盒子里子元素可以有不同方向的浮动
当子div的宽度超过父盒子的宽度时它会逐级往上找
- 用浮动来制作表格
- 浮动会消除塌陷
加入浮动前,margin塌陷还会存在
加入浮动之后
- 浮动会把位置让出来
加入浮动前
加入浮动之后
- 浮动会有文字围绕效果
- 浮动存在的问题
浮动的元素不能撑开父级
会影响后边的元素
怎么解决这个问题呢?具体还得使用清除浮动样式
①给父盒子加高度
但是这个问题还是解决的不够彻底,高度必须自己去设置而不能够自适应
②clear属性值:left right both
clear清除自身所受其他元素浮动影响
left:清除受到的左浮动影响
right:清除受到的右浮动影响
both:全部清除
复合子还是不能被子盒子撑开 - 重点来了,三个方法
- 隔墙法-----外墙法
在相互影响的两个元素之间加一堵墙,加上clear属性
- 隔墙法-----内墙法
将清除浮动的墙放在父盒子的内部最后,只要有浮动,就往盒子内部加一堵墙
内墙法解决了三个问题:①高度自适应②浮动元素之间的影响③margin失效 - overflow-------hidden
盒子内部的元素可以设置溢出模式,隐藏,自动显示
属性值:hidden溢出隐藏 auto溢出滚动
加入hidden
加入auto
还是之前的例子,哪个盒子有浮动哪个盒子加overflow
效果也是可以出来的