我们来看一个例子:
浏览器效果图:
这时会发现父元素会自动调整自身的大小来包含子元素。
如果包含元素定义了高度和宽度则他不会随子元素的大小而自动调整自身显示区域来适应子元素的显示。注意,在IE6及更低版本浏览器中包含框仍然能够自动调整自身大小来适应子元素的显示大小,不过在IE7版本中微软纠正了这个不符合标准的显示方法。如下
示例:
浏览器效果图:
默认状态下溢出不隐藏,我们可以添加 样式 overflow:hidden隐藏多余的部分或overflow: scroll多余部分显示滚动条。
如果把浮动元素嵌入到流动元素之内,则父元素不能够自适应子元素的高度,
如下示例:
浏览器效果图:
在上图中可以看到包含元素div并,没用显示。原因就是包含元素没有适应子元素的高度,而是根据自身定义的属性以独立的形式显示(父元素没有被撑开,仅收缩成一条直线显示)。所以,在应用混合嵌套式,要预测到浮动与流动混合布局时会出现的各种怪现象,并积极做好兼容处理。
解决方法:可以在包含元素内的最后一行添加一个清除元素,强制撑开包含元素,使其包含浮动元素。
示例如下:
浏览器效果图:
本文章参考书籍:HTML5+CSS3+JavaScript从入门到精通(标准版)未来科技 编著
float 属性定义元素在哪个方向浮动。
float有left ,right, none inherit 4个值。下面是值描述:
left 元素向左浮动。
right 元素向右浮动。
none 默认值。元素不浮动,并会显示在其在文本中出现的位置。
inherit 规定应该从父元素继承 float 属性的值。