CSS浮动怎么做【html5教程】,CSS
作者:搜教程发布时间:2019-12-21分类:html教程浏览:35评论:0
导读:浮动的框能够向左或向右挪动,直到它的外边沿遇到包括框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样。CS...

浮动的框能够向左或向右挪动,直到它的外边沿遇到包括框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样。
CSS 浮动,在 CSS 中,我们经由过程 float 属性完成元素的浮动。 ( 引荐进修:CSS教程 )
请看下图,当把框 1 向右浮动时,它离开文档流而且向右挪动,直到它的右边沿遇到包括框的右边沿:
再请看下图,当框 1 向左浮动时,它离开文档流而且向左挪动,直到它的左边沿遇到包括框的左边沿。由于它不再处于文档流中,所以它不占有空间,实际上掩盖住了框 2,使框 2 从视图中消逝。
假如把一切三个框都向左挪动,那末框 1 向左浮动直到遇到包括框,别的两个框向左浮动直到遇到前一个浮动框。
如下图所示,假如包括框太窄,没法包容程度分列的三个浮动元素,那末别的浮动块向下挪动,直到有充足的空间。假如浮动元素的高度差别,那末当它们向下挪动时大概被别的浮动元素“卡住”:
以上就是CSS浮动怎样做的细致内容,更多请关注ki4网别的相干文章!
标签:CSS
相关推荐
- 纯 CSS 如何实现实现鼠标跟随效果?(代码详解)_html5教程,CSS,鼠标跟随
- 纯 CSS 如何实现实现鼠标跟随效果?(代码详解)_css教程,CSS,鼠标跟随
- CSS 实现拖拽改变布局大小_html5教程,CSS,左右拖拽,布局大小
- CSS 实现拖拽改变布局大小_css教程,CSS,左右拖拽,布局大小
- CSS Modules 详解_html5教程,CSS
- CSS Modules 详解_css教程,CSS
- 使用 CSS 实现一个简单的骨架屏(Skeleton Screen)_html5教程,CSS
- 使用CSS实现皮卡丘_html5教程,CSS
- CSS 中伪类的使用(干货)_html5教程,CSS
- 使用 CSS 实现一个简单的骨架屏(Skeleton Screen)_css教程,CSS
你 发表评论:
欢迎- html教程排行
-
- 1css如何实现给div添加滚动并隐藏滚动条_html5教程,css,div,滚动条
- 2css中的content属性该如何使用_html5教程,css,content
- 3伪元素“::after”和“::before”的作用分别是什么_html5教程,伪元素,::after,::before
- 4详解CSS3实现弹性布局的方式_html5教程,CSS3,弹性布局,flexbox
- 5如何使用CSS隐藏滚动条?_html5教程,隐藏,css,滚动条
- 6CSS开发常用命名_html5教程,css
- 7纯CSS3打造自行车_html5教程,CSS3
- 8css实现文字过长显示省略号_html5教程,css,省略号
- 9css如何实现下划线滑动效果_html5教程,css,下划线
- 最新文章
- 广而告之