当前位置：首页 > Web前端 > CSS

CSS浮动的特点

时间：2023-03-31 00:55:43 CSS

floating有以下特点：不能被覆盖的文本浮动元素不是块级元素，它后面的元素会和它并排（除非元素的宽度是设置，当屏幕放不下时会换行）如果浮动元素的前一个元素没有浮动，则浮动只会在当前行浮动；floating遇到floating，会排成一行，除非没有位置。当元素将定位值设置为absolute或fixed时，浮动将被忽略。父元素的高度塌陷。浮动元素会受到下一个元素的margin-top的影响。不能被覆盖的文字item1

item2

可以看到item2的div除了文字是看不见的，因为已经不见了在第1项下。为什么文本没有被浮动元素覆盖？因为浮动的本质是用来实现文字换行的。从上面也可以得出结论：浮动元素后面的块级元素会占据浮动元素的位置，浮动元素永远在标准流元素之上。浮动元素后面没有块级元素，后面的元素会和它并排（除非设置了元素的宽度，屏幕放不下时行不会换行）item1

item2

如果浮动元素的前一个元素不浮动，浮动只会浮动在当前行；浮动遇到浮动会排在一行，除非没有positionitem1item2item3item1item2item3item4可以设置宽度为百分比，实现自适应div{width:25%;高度：100px；向左飘浮;}当元素的定位值设置为absolute或fixed时，浮动将被忽略Floatingmeetspositioning内联元素使用floating生成块状框，因此可以使用width、height、margin、padding等属性item1item2float导致父元素高度塌陷如果包裹容器的高度不是为子元素设置为float，就不会有问题。一旦为子元素设置了float，父元素将无法适配float元素的高度，父元素的高度就会为0，导致无法显示背景色。原因是：因为div的高度没有预先设定，所以div的高度是由它包含的子元素的高度决定的。浮动不在文档流中，所以不会计算子元素的高度。此时在div中，相当于div中子元素的高度为0，所以父元素的高度塌陷了。解决方法，1.在父元素上加上"overflow:hidden"，当然也可以“溢出：自动”。但是为了兼容IE，最好使用overflow:hidden。.box{overflow:hidden;}那么为什么“overflow:hidden”能解决这个问题呢？是因为“overflow:hidden”会触发BFC，而BFC又决定了“height:auto”的计算方式，即BFC计算高度时，浮动元素也参与计算，所以父元素会适配到此时浮元高。所以，你也可以设置“display:inline-block”、“position:absolute”、“float:left”来解决父元素高度塌陷的问题。因为只要能创建BFC，就能达到包裹浮动子元素的效果。所以网上有说“BFC可以包裹浮动元素”。2.添加伪元素+清除浮动在父元素的内容之前或之后添加一个伪元素到父元素的内容之后，可以使用::before或者::after，那么内容就是empty使其不占位置，最后在伪元素中加上"clear:both"清除浮动。为什么这是可能的？要找出原因，需要知道两点：一是伪元素的实际作用，二是css的clear浮动（clear）只能影响使用clear的元素本身，不能影响其他元素，clearfloating可以理解为打破水平排列。首先需要理清::after和::before这两个函数。他们不会在元素后面或前面插入一个伪元素，而是在元素内容后面或前面插入一个伪元素（在元素内部）。之前一直以为:before和:after伪元素插入的内容会被注入到目标元素之前或之后。事实上，注入的内容将是关联目标元素的子元素，但它会被放置在该元素的任何元素中。内容的“之前”或“之后”。让我们举个例子。可以看到.box的高度为300px，说明在.box的内容中插入了两个伪元素。综上所述，我们经常使用以下方法来清除浮动的.box::after{内容：'';显示：块；clear:both;}或.box::before{content:'';显示：块；clear:both;}或.box::before,.box::after{content:'';显示：块；clear:both;}//::before和::after必须和content属性一起使用，用来定义插入的内容，内容必须有值，至少为空。默认情况下，伪类元素的显示默认是内联的，可以通过设置display:block来改变它的显示。在父元素内容前后插入一个伪元素，内容为空保证不占位置（高度为0）。"clear:both"可以清除父元素的左右浮动，导致.box::before和.box::after在遇到浮动元素时换行，会扩展高度，父元素会适配这个height这样没有高度就会出现塌陷。其他解决高度塌陷的方法都是基于这两种思路，一种是触发BFC，一种是添加元素+清除浮动（clear）。浮动元素会受到后面元素的margin-top影响

div1

div2

可以看到第一个div也跟了上去。解决方案是为后一个元素设置clear。这时候后面元素的margin-top就会失效。

div1

div2

上一篇：优秀程序员web前端培训分享HTMLCSSHTML表单标签

下一篇：盒子模型的一些分析

CSS浮动的特点相关文章

最新推荐

猜你喜欢