7.23CSS浮动

　　　　　　　　　　7.22CSS浮动

 标准文档流组成

块元素(block)

<h1>…<h6>、<p>、<div>、列表

内联元素(inline)

<span>、<a>、<img/>、<strong>...

内联元素可以包含在块元素中,成为块元素的子元素,反之不成立

display属性

值	说明
block	块级元素的默认值，元素会被显示为块级元素，该元素前后会带有换行符
inline	内联元素的默认值。元素会被显示为内联元素，该元素前后没有换行符
inline-block	行内块元素，元素既具有内联元素的特性，也具有块元素的特性
none	设置元素不会被显示

 

block:转为块元素

inline:内联元素

inline-block:内联块元素

block inline块级元素与行级元素的转变

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

none控制元素的显示和隐藏

CSS float 属性

在 CSS 中，我们通过 float 属性实现元素的浮动。

float:right

        left

       both

clear属性:清除浮动

值	说明
left	在左侧不允许浮动元素
right	在右侧不允许浮动元素
both	在左、右两侧不允许浮动元素
none	默认值。允许浮动元素出现在两侧

清除两端浮动

img {     

clear:both;

}

clear属性可以清除浮动对其他元素造成的影响，可是依然解决不了父级边框塌陷问题

浮动元素后面加空div

父级添加overflow属性

overflow属性

属性值	说明
visible	默认值。内容不会被修剪，会呈现在盒子之外
hidden	内容会被修剪，并且其余内容是不可见的
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余内容
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容

 

父级添加伪类after

清除浮动，防止父级边框塌陷的四种方法

浮动元素后面加空div 简单，空div会造成HTML代码冗余

设置父元素的高度 简单，元素固定高会降低扩展性

父级添加overflow属性 简单，下拉列表框的场景不能用

父级添加伪类after 写法比上面稍微复杂一点，但是没有副作用，推荐使用