CSS深入理解之float浮动_技术问答

首页免费课 CSS深入理解之float浮动问答

CSS深入理解之float浮动

                
                张鑫旭
            页面重构设计

                    查看讲师更多课程 
                    张鑫旭讲师的其他课程
                
CSS深入理解之border
中级·56800
免费课程
                                
CSS深入理解之padding
中级·52483
免费课程
                                
CSS深入理解之margin
中级·55943
免费课程
                                
CSS深入理解之z-index
中级·40882
免费课程
                                
CSS深入理解之relative
中级·47920
免费课程
                                
CSS深入理解之vertical-align
中级·39337
免费课程
                                
                难度初级
            
                时长50分
            
                学习人数
            
综合评分9.17
                            369人评价
                        查看评价
                                9.5
                                内容实用
                            
                                9.1
                                简洁易懂
                            
                                8.9
                                逻辑清晰

全部评论问答未解决精华

什么是鑫三无准则？

最新回答 / 假蛙工程师

所谓鑫三无准则，就是张鑫旭老师总结的三无准则：链接：https://www.zhangxinxu.com/wordpress/tag/%E9%91%AB%E4%B8%89%E6%97%A0%E5%87%86%E5%88%99/

1 回答 140 浏览 2-1 float特性-包裹与破坏

2024-05-20

假蛙工程师

这老师很强，2014年的视频，我2024年才看到。

0 1-1 float的历史

2024-05-20

Mesry

跟些文章一样不简练

0 1-1 float的历史

2022-02-19

这里说input设置浮动后display值会变为block，为什么我自己尝试了之后并没有改变呢？

最新回答 / 假蛙工程师

2024年5月22日，google浏览器做实验，的确如你所述，inline-block的display不会变为block，可能inline-block中有block，具有block可以设置宽高的特性，没有必要这样做，可以尝试使用span元素进行实验，display的确从inline改变为block

2 回答 709 浏览 5-1 float浮动的滥用

2021-05-06

慕莱坞4276893

传说的幽默风趣这个样子？

0 2-1 float特性-包裹与破坏

2020-08-29

ZOR_

有些人到了一定境界就傻勒

0 1-1 float的历史

2020-05-05

走馬勿观花

至于为何是2000px宽，那是因为现在的屏幕也就1920px是常规，很少大于 2000px的屏幕浏览网页。所以考虑到这些问题，设置的宽，比最大值大一点，也就凑个整数，没啥刻意的。
你要想的话，也可以大于2000px；反正越大越好。

0 6-2 浮动与两侧皆自适应的流体布局

2020-03-12

走馬勿观花

display: table-cell; *display: inline-block; width: 2000px; *width: auto;

不要理这么多，把它当规范，当成这种布局的公式，跟随张大佬的脚步。

0 6-2 浮动与两侧皆自适应的流体布局

2020-03-12

走馬勿观花

关于为何 display: table-cell; width: 2000px; 为何要设置这么长，我查到了：

在本例demo中，右侧内容足够多，所以宽度完整的撑开了，如果内容有限，则宽度就是内容的宽度，此时想要让某个元素（例如关闭按钮）右侧定位就会有问题，解决方法就是定义一个非常宽的宽度，就像上面facebook截图中的CSS属性一样

传送门：https://www.jianshu.com/p/a1cf75448b43

0 6-2 浮动与两侧皆自适应的流体布局

2020-03-12

走馬勿观花

这里，关于右浮动带来的ie7兼容问题的解决方法
①不改变dom，给“左侧”套上元素标签，并左浮动，形成左右浮动
<div>
<span style="float: left">左侧</span>
<span style="float: right">右侧</span>
</div>

②改变dom位置，也就是将右浮动的元素放到前面：
<div>
<span style="float: right">右侧</span>
左侧
</div>

0 7-1 Float与兼容性

2020-03-09

走馬勿观花

第二个，按照文档流布局，确实dom没有变，因为如果不添加float。
那么div（文本区）+a（头像图）是上下，正常的布局。
然后因为float了，所以两者可以共享一行了。

为什么说第一个dom变了，因为，正常文档流，是从上到下，从左到右的，但是a（头像图），把它放到前面了，就，效果是从左到右，但是dom却是从右到左

0 6-3 浮动与右侧尺寸固定的流体布局

2020-03-09