}
.class2 {
width: 250px;
height: 130px;
background: gold;
float: left
}
.class3 {
width: 300px;
height: 180px;
background: red;
}
效果截图:
由此我们可以很明显的看出:
浮动元素不会超越其前面的元素
样例代码:
效果截图:
浏览器宽度足够时,三个div会并排排列 。
当我们发大页面时,浏览器宽度不足以容纳最后一个div时,最后一个div掉下来,并且顶部不会超过倒数第二个div的底部。
=================================================================
样例代码:
效果截图:
由此我们可以得到下面的结论:
**1.浮动元素不会在其浮动方向上溢出父级的包含块 也就是说元素左浮动,其左外边距不会超过父级的左内边距,元素右浮动,其右外边距不会超过父级的右内边距 。
2.浮动元素的位置受到同级同向浮动元素的影响 也就是说同一父级中有多个浮动元素,后一个元素的位置会受到前一个浮动元素位置的影响,他们不会相互遮挡,后一个浮动元素会紧挨着前一个浮动元素的左外边距进行定位,如果当前空间不足,则会换行,否则会放置在前一个浮动元素的下面。**
样例代码:
效果截图:
由此我们可以得到下面的结论:
父元素的高度靠子元素撑开,子元素全部浮动后,均脱离文档流,父元素高度塌陷。
====================================================================
| overflow属性 | 说明 |
| — | — |
| visible | 默认值。内容不会被修剪,会呈现在盒子之外 |
| hidden | 内容会被修剪,并且其余内容是不可见的 |
| scroll | 内容会被修剪,但是浏览器会显示滚动条以便查看其余内容 |
| auto | 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容 |
**overflow属性的妙用:
配合着浮动父容器,解决父容器高度他塌陷的问题。
使用overflow扩展盒子高度,overflow属性会触发浏览器重新计算父元素盒子高度。**
样例代码:
效果截图:
样例代码:
效果截图:
当d2的宽度超过了父级d1的宽度时,我们可以通过设置不同的overflow属性值来实现不同的解决办法,我所演示的是浏览器会显示滚动条以便查看其余内容。
==============================================================
| clear属性 | 说明 |
最后
一个好的心态和一个坚持的心很重要,很多冲着高薪的人想学习前端,但是能学到最后的没有几个,遇到困难就放弃了,这种人到处都是,就是因为有的东西难,所以他的回报才很大,我们评判一个前端开发者是什么水平,就是他解决问题的能力有多强。
分享一些前端面试题以及学习路线给大家
d1">
效果截图:
当d2的宽度超过了父级d1的宽度时,我们可以通过设置不同的overflow属性值来实现不同的解决办法,我所演示的是浏览器会显示滚动条以便查看其余内容。
==============================================================
| clear属性 | 说明 |
最后
一个好的心态和一个坚持的心很重要,很多冲着高薪的人想学习前端,但是能学到最后的没有几个,遇到困难就放弃了,这种人到处都是,就是因为有的东西难,所以他的回报才很大,我们评判一个前端开发者是什么水平,就是他解决问题的能力有多强。
分享一些前端面试题以及学习路线给大家
[外链图片转存中…(img-L3yoZj2z-1718005782759)]