深入理解css浮动带来的问题及解决方法(清除浮动)

简介: 深入理解css浮动带来的问题及解决方法(清除浮动)

为什么需要浮动


有很多的布局效果,标准流没有办法完成,此时就可以利用浮动完成布局。


因为浮动可以改变元素标签默认的排列方式


浮动及其工作原理


     浮动的元素可以向左或向右移动,直到它的外边 缘碰到包含元素(父元素)或另一个浮动元素的边框为止。要想使元素浮动 ,必须为元素设置一个宽度( width)。虽然浮动元素已不在文档流中,但是它浮动后所处的位置依然在浮动之前的水平方向上。因为浮动元素不在文档流中,所以文档流中的块元素表现得就像浮动元素不存在一样,下面的元素会填补原来的位置。有些元素会在浮动元素的下方,但是这些元素的内容并不一定会被浮动的元素遮盖。当定位内联元素时,要考虑浮动元素的边界,围绕浮动元素放置内联元素。也可以把浮动元素想象成被块元素忽略的元素,而内联元素会关注的元素。


内联元素可以实现浮动吗?


在css中,任何元素都可以浮动。不论浮动元素本身是何种元素,都会生成一个块级框。因此,对于内联元素,如果设置为浮动,会产生和块级框相同的效果。


浮动元素引起的问题和解决方法


浮动引起的问题


(1 )父元素的高度无法被撑开,影响与父元素同级的元素


(2 )与元素同级的非浮动元素会紧随其后(类似遮盖现象)。


(3 )如果一个元素浮动,则该元素之前的元素也需要浮动;否则会影响页面显示


的结构(即通常所说的串行现象)


解决方法(清除浮动)


1. clear清除浮动(添加空div法) 在浮动元素下方添加空div,并给该元素写css样式

20210721212055201.png


2.给浮动元素父级设置高度


父级同时浮动(需要给父级同级元素添加浮动)父级设置成inline-block,其margin: 0 auto居中方式失效


直接给父级添加overflow:hidden清除浮动方法


另外一种万能清除法 after伪类清浮动

.float_ div:after{
    content.";
    clear:both;
    display:block;
    height:0;
    overflow:hidden;
    visibility:hidden;
   }
.float_ div{
    /* 兼容ie */
    zoom:1
}


清除浮动的本质是清除浮动元素脱离标准流造成的影响


相关文章
|
5月前
|
前端开发
5.CSS学习(浮动)
【7月更文挑战第29天】
40 4
|
26天前
|
前端开发
CSS 浮动属性讲解和使用
本文介绍了CSS中的浮动(float)属性,包括其基本功能、属性选项及其在网页布局中的应用。浮动使元素脱离文档流,向左或右排列,周围元素随之调整。文章还详细讲解了清除浮动的方法,如使用clear属性、设置父元素高度、利用overflow属性、伪元素等,以解决因浮动导致的布局问题。最后,强调了浮动在创建复杂布局时的作用,并预告后续内容。
35 2
|
6月前
|
前端开发 容器
CSS基础-浮动:float与清除浮动
【6月更文挑战第9天】本文介绍了CSS中的`float`属性,用于创建多列布局和图文混排,但会导致浮动塌陷和元素重叠问题。为解决这些问题,文章探讨了`clear`属性的四种清除浮动方法,包括`clear`属性、空元素、伪元素和`overflow`方法。随着Flexbox和Grid布局的兴起,它们在某些场景下替代了浮动,但理解浮动原理仍是布局基础。掌握浮动和清除浮动技巧对构建稳定布局至关重要。
78 5
|
3月前
|
前端开发
【前端web入门第六天】01 CSS浮动
这是关于CSS布局第六天学习目标的介绍,主要解决多个`<div>`标签在同一行显示的问题,即一个在左边,另一个在右边。文中介绍了标准流、浮动及flex布局的概念,重点推荐使用flex布局。文章详细讲解了浮动的基本使用、布局技巧及清除浮动的方法,包括额外标签法、单伪元素法、双伪元素法和`overflow`隐藏法,并提供了示例代码帮助理解。
|
4月前
|
前端开发 容器
前端面试热门问题--浮动和清除浮动(CSS)
前端面试热门问题--浮动和清除浮动(CSS)
|
5月前
|
前端开发 JavaScript
文本,wangEditor5展示HTML无样式,wangEditor5如何看源码,Ctrl + U看CSS文件,代码高亮,Prism.js可以实现,解决方法,参考网页源代码的写法
文本,wangEditor5展示HTML无样式,wangEditor5如何看源码,Ctrl + U看CSS文件,代码高亮,Prism.js可以实现,解决方法,参考网页源代码的写法
|
5月前
|
前端开发
CSS:浮动
CSS:浮动
|
6月前
|
前端开发 容器
CSS浮动(如果想知道CSS有关浮动的知识点,那么只看这一篇就足够了!)
CSS浮动(如果想知道CSS有关浮动的知识点,那么只看这一篇就足够了!)
|
5月前
|
前端开发 C++ 容器
css【详解】—— 圣杯布局 vs 双飞翼布局 (含手写清除浮动 clearfix)
css【详解】—— 圣杯布局 vs 双飞翼布局 (含手写清除浮动 clearfix)
57 0
|
6月前
|
前端开发
Web网页制作-知识点(4)——CSS盒子模型、弹性盒模型(flex box)、文档流、浮动、清除浮动、定位、圆角、阴影二
Web网页制作-知识点(4)——CSS盒子模型、弹性盒模型(flex box)、文档流、浮动、清除浮动、定位、圆角、阴影二
52 0