小李带你玩转html—06

标准文档流与浮动

• 文字必须在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
  
  
  效果也是可以出来的