浮动

浮动

行内元素和块级元素

标签分为两种等级：

• 块级元素：<span>,<b>,<a>,<em>,<i>,<u>
• 行内元素:<h1>~<h6>,<p>,<h>,<dt>,<dd>,<li>

行内元素和块级元素的区别：

行内元素：

• 与其他行内元素并排
• 不能设置宽高；默认的宽度就是文字的宽度。

块级元素：

• 霸占一行，不能与其他任何元素并列。
• 能接受宽、高；如果不设置宽度，那么宽度将默认变成父元素的100%。

行内元素和块级元素的分类：

• 文本级标签：<p>,<span>,<a>,<b>,<i>,<u>,<em>
• 容器级标签：<div>,<h系列>,<li>,<dt>,<dd>
• 为什么说p标签是文本级标签呢，因为p标签里面只能放“文字，图片，表单元素”,p里面不能放h和ul，p标签里面也不能放p标签。

行内元素和块级元素相互转换

通过使用display属性将块级元素和行内元素进行相互转换。“display”即是显示模式

块级元素可以转换为行内元素：

display:inline;

当把一个块元素转为行内元素后，这个标签将和span无异。inline就是“行内”的意思。

• 此时这个div不能设置宽度、高度。
• 此时这个div可以和别人并排。

行内元素转换为块级元素

给一个行内元素（如 span）设置：

display:block;

那么，这个标签将立即变为块级元素，block是“块”的意思

• 此时这个span能够设置宽度、高度。
• 此时这个span必须霸占一行了，别人无法和他并排
• 如果不设置宽度，将自动撑满父元素。

现实使用中，往往有时候需要在一行中既要行内元素又要块元素，这时就用到了**“脱离标准流”**

css中一共三种方法，使一个元素脱离标准文档流：

1. 浮动
2. 绝对定位
3. 固定定位

1. 浮动的元素脱标

1. <span>标签在标准流中是不能设置宽高的（因为是块元素）；但是一旦设置为浮动之后，即使不转成块元素，也能设置宽高了。
2. 一旦一个元素浮动了，那么将能够并排了，并且能够设置宽高了。不论原始是什么标签，一旦浮动之后，将不区分行内、块级了。

2.浮动的元素互相贴靠

3.浮动的元素有“字围”效果

总结：永远不是一个东西单独浮动，浮动都是一起浮动，要浮动，大家都浮动

4.收缩

一个浮动的元素，如果没有设置width，那么将自动收缩为内容的宽度。

浮动的清除

1. 给浮动元素的增加元素加高度

   • 总结：如果一个元素要浮动，那么它的祖先元素一定要有高度

   • 有高度的盒子，才能关住浮动

   • 只要浮动在一个有高度的盒子中，那么这个浮动就不会影响后面的浮动元素。

2. clear：both

   • 实际使用中，随便给一个父元素设置高度是不合理的，会导致其他内容被称高，为了解决这种问题，在不写height的情况下，也把浮动清除了可以使用 clear:both; 这个属性。
   • clear 就是清除的意思；both 指的是左浮动、右浮动都要被清除；clear:both 的意思就是：不允许左侧和右侧有浮动对象。
   • 注意：这种方法有一个非常大的问题，它所在的标签会导致，margin属性失效了,失效的原因是 “元素中的高度为零“。

3. 隔墙法

   • 可以在受影响的两个div之间再创建一个div，然后给这个div赋予一个clear:both;。

4. 内墙法

   • 内墙法是在div元素里面再创建一个div
   • 优势：内墙法可以给它所在的父元素，通过子元素设置的宽高进行撑出父元素的宽高

5. 清除浮动的方法：overflow:hidden;

   overflow:hidden;
   

   • overflow 表示“溢出”；hidden “隐藏”；这个属性的意思是“溢出隐藏”；所有溢出边框的内容，都要进行隐藏掉。

margin相关的知识

1. margin塌陷/margin重叠

   1. 标准文档流中，竖直方向的margin不重叠，取较大的值作为margin（水平方向的magin是可以叠加的，即水平方向没有塌陷现象）。

2. 盒子居中margin:0 auto;

   1. margin的值可以为auto，表示自动。当left、right两个方向都是auto的时候，盒子居中了。

      margin-left:auto;
      margin-right:auto;
      

   2. 盒子居中的简写：

      margin: 0 auto;
      

3. 注意：

   • 只有标准流的盒子。才能使用margin:0 auto;居中。也就是说。当一个盒子浮动了、绝对定位了、固定定位了，都不能使用margin:0 auto;

   • 使用margin:0 auto; 的盒子，必须有width，明确的width（可以这样理解，如果没有明确的witdh，那么它的width就是霸占整行）

   • margin:0 auto; 是让盒子居中，不是让盒子里的文本居中；文本的居中要使用text-align:center;

   • margin:0 auto;//让这个div自己在大的容器中的水平方向上居中
     text-align:center; //让这个div内部的文本居中。
     

   • text-align:left;//文本居左，默认的就是
     text-align:right;//文本居右
     

善用父元素的padding，而不是子元素的margin

• 如果父元素没有border，那么子元素的margin 实际上是“流”。
• margin这个属性，本质上描述的是兄弟元素之间的距离；最好不要用margin表达父子元素之间的距离