float和display的有关内容总结

display

1.**display的特性**

- 块级元素与行级元素的转变

- 控制块元素排到一行：inline-block

- 控制元素的显示和隐藏：none

2.**display属性**

- block：块级元素的默认值，元素会被显示为块级元素，该元素前后会带有换行符，即块元素独占一行

- inline:行内元素的默认值，元素会被显示为行内元素，该元素前后不会带有换行符，即行内元素可以放在一行上。inline不能设置宽高，但是让inline浮动之后，该行内元素会转化为块元素，所以可以设置行高了。

inline-block:行内块元素，可以把块元素放在一行上

- none：元素会被隐藏。

3.#### display：

inline属性使元素内联展示，内联元素设置宽度无效，相邻的inline元素会在一行显示，不能设置宽高。但是给行内元素设置浮动之后，可以设置宽和高。

block的元素始终会独占一行，呈块状显示，可设置宽高。

inline-block的元素就是宽高可设置，相邻的元素会在一行显示。

4.inline-block： 当我们要设置某些元素在一行显示，并且排列方向一致的情况下，我们尽可能去用inline-block。因为inline-block的元素仍然在当前文档流里面，这样就减少了程序的更改操作，并且也不用担心父级边框塌陷的问题。

有两个元素，我们需要一个向左，一个向右排列，这时候我们就只能用float来实现，float能控制排列方向。

### float和display：都可以设置元素的宽和高，但是都不能设置方位。

float：

1.# float浮动：是针对块级元素的浮动

浮动：浮动使元素脱离正常的文档流，是元素移动到所处容器的边界，或者移动到触碰另一个浮动的元素。

### float：浮动设计的初衷，是为了实现文本环绕效果。

**left** ：元素会产生一个块级盒子向左浮动，正常的文档流会从这个盒子的右边和顶部开始。，即旁边的文字会紧靠着元素的右边或顶部。

**right** ：跟 `left` 属性值类似，只是元素产生的块级盒子向右浮动，正常的文档流会从这个盒子的左边和顶部开始。即旁边的文字会紧靠着元素的左边或顶部。

**none** ：这个盒子不浮动，会显示其在文本中出现的位置

设置元素的浮动为左或者右浮动，当设置元素浮动时，相邻元素会根据自身大小，排满一行，如果父容器宽度不够则会换行。当我们设置了元素的浮动时，这个元素就脱离了文档流，相邻元素会呈环绕装排列。

2.## 一浮多浮：一个块状元素设置为浮动，则其他的块状元素也需要设置浮动，当一个元素设置为浮动后，他附近的行内元素会自动跟上，即旁边的文字会紧靠着元素。

3.使用浮动如何改变元素定位。

#### 根据margin ，padding来设置元素的位置。

#### 设置元素的position以后 根据 left ，top 来设置位置。

4.浮动会导致的问题：父级元素塌陷。

父元素坍塌问题：大家应该知道，对于一个元素来说，不给他固定高度的时候他的高度是由内容撑开的，也就是说，如果这个元素里面没有任何内容，他的高度就是0，当这个元素有内容的时候，他就有了高度（也就是内容的高度），这也就导致了float元素的这个问题，当元素设置了float之后，它就脱离了文档流，也就是说此时父元素不再包含它，如果这时候盒子内没有其他元素的话，父元素的高度就会变为0。