【www.gdgbn.com--flex】
一、浮动元素自动变块级元素 首先说说块级元素和行内元素区别,简单的来说,块级元素独占一行,可以设置宽高以及边距,行内元素不会独占一行,设置宽高行距等不会起效。常见的块级元素有:h1~h6、p、div、ul、table,常见的行内元素有:span、a、input、select等。 示例代码:
浮动元素span
浮动元素span
效果如下:
二、浮动元素后的非浮动元素问题 浮动元素后边的元素若是非浮动行内元素且因为定位产生重叠时,行内元素边框、背景和内容都在该浮动元素“之上”显示,若是非浮动块级元素跟在浮动元素后边且在定位后产生重叠时,该块级元素边框和背景在该浮动元素“之下”显示,只有内容在浮动元素不在浮动元素“之下”显示。 示例代码如下:
浮动div
跟在浮动元素后边的div
跟在浮动元素后边的span
但各个浮动元素高度不一致的话效果很可能出现下边的情况:
很意外吧,主要排列到元素7的时候,一行已经显示不下了,所以要换行,但此处换行并不是从行头开始,而是从元素5那开始,因为元素5比元素6高很多导致。 四、子元素全为浮动元素高度自适应问题 由于元素浮动后脱离了文档流,所以父元素是无法根据元素来自适应的。解决此问题最常用的办法由两种,第一种就是在所有浮动元素后加: 第二种办法,使用万能clear: .clearfix:after { visibility: hidden; display: block; font-size: 0; content: "."; clear: both; height: 0; } * html .clearfix { zoom: 1; } *:first-child + html .clearfix { zoom: 1; }