`

css 设置浮动和清除浮动

 
阅读更多

http://www.divcss5.com/jiqiao/j406.shtml

 

 

https://my.oschina.net/leipeng/blog/221125

 


首先更正一点clear不是一个标签,它是css中的一个属性。
其属性值有四个clear:both|left|right|none;
简单来说呢,clear属性的作用就是“清除”浮动。
如果某元素设置clear:left;表示该元素左边不存在浮动元素
相应的,clear:right;表示该元素右边不存在浮动元素;clear:both;表示该元素两边都不存浮动元素。clear:none表示两边允许有浮动元素。

在视觉上要使某元素左边或右边不存在浮动元素,就只有它往下移一行,或浮动元素往下移一行。(这个元素肯定是不能将浮动元素清除的了,只是用这样的方式达到页面布局的效果而已)
其中的浮动元素就是设置了float属性的元素。 

clear:left|right|both都会用到
不知道你有没有碰到过这种情况:
四个div,想让它们显示成两行,我一般会这么做
<div style="float:left;"></div><div style="float:left;"></div>
<div style="float:left;clear:left;"></div><div style="float:left;"></div>
或者
<div style="float:left;"></div><div style="float:left;clear:right;"></div>
<div style="float:left;"></div><div style="float:left;"></div>

 

分享到:
评论

相关推荐

    CSS清除浮动_清除float浮动 - DIVCSS5.htm

    具体详细的阐述了css浮动如何解决和浮动产生的原因。

    css中3种清除浮动方法

    总结来说,CSS中的清除浮动有多种方法,包括传统的`clearfix`方法、使用`:clearfix`伪类和采用Flexbox布局。选择哪种方法取决于项目的需求,如兼容性、代码简洁性和布局复杂性等因素。理解这些方法的原理和应用场景...

    div+css清除浮动

    div+css清除浮动

    浅谈css中浮动和清除浮动带来的影响

    理解浮动和清除浮动的概念对于创建响应式和适应性强的网页布局至关重要,能够帮助开发者更好地控制元素的排列和空间占用,实现复杂的设计需求。同时,随着现代CSS布局技术的发展,如Flexbox和Grid,浮动布局的使用...

    css清除浮动的方法有哪些?.docx

    通过设置浮动元素容器的`overflow`属性为`hidden`或`auto`,可以清除浮动。在IE6中,为了触发hasLayout,还需要加上`*zoom:1`。这样,浮动元素会被包含在容器内部,容器的高度会自动扩展以适应浮动元素。优点是代码...

    xhtml+css清除浮动的3种方法

    这种方法是最直观的一种方式,它通过在浮动元素后面添加一个额外的空标签(通常是`&lt;div&gt;`),并设置`clear:both`来清除浮动的影响。例如: ```css .clear { clear: both; height: 0; font-size: 0; overflow: ...

    CSS清除浮动_2种方法源代码.zip

    Flexbox是CSS3引入的一种新的布局模式,它能更方便地处理容器内元素的对齐和分布,包括清除浮动。以下是一个使用Flexbox清除浮动的示例: ```css .container { display: flex; flex-wrap: wrap; } .float-...

    HTML5 清除浮动

    3. 使用CSS Flexbox:HTML5引入了Flexbox布局模型,它能自动处理子元素的排列和尺寸,不再需要手动清除浮动。只需将父元素设置为flex容器,并使用`flex-wrap: wrap`允许换行,浮动问题即可解决: ```css .parent {...

    CSS浮动属性Float详解 什么是CSS Float?

    CSS 浮动属性 Float 详解 CSS 浮动属性 Float 是一种重要的定位属性,允许页面元素浮动在其他元素旁边。Float 属性可以取四个值:Left、Right、None 和 Inherit。其中,Left 和 Right 分别浮动元素到左边和右边,...

    CSS-清除浮动

    从别人博客看来的,整理成了PPT,分享下吧,感觉挺好懂的

    css清除浮动

    ### CSS清除浮动详解 #### 一、引言 在网页设计与前端开发中,CSS(层叠样式表)是用于定义HTML文档外观的关键技术之一。其中,“清除浮动”是一项非常重要的概念,它解决了布局中常见的一个问题——即由于元素...

    CSS2中文参考手册+CSS浮动

    CSS2中文参考手册和CSS浮动的深入理解对于任何前端开发者都至关重要。通过学习这些内容,你可以更好地控制网页的样式、布局和交互,提高网页设计的专业性和用户体验。随着技术的发展,虽然现代CSS已经发展到更高级的...

    CSS 浮动.pdf

    理解如何设置浮动、确定宽度以及清除浮动,是CSS布局基础中的关键部分。随着现代布局技术的发展,如Flexbox和Grid,浮动在某些情况下可能不再是首选解决方案,但在一些特定场景下,它仍然是一个实用的工具。

    浅谈css清除浮动(clearfix和clear)的用法

    本文主要是讲解如何在 html 中使用 clearfix 和 clear,针对那些刚开始了解 css 的童鞋。关于 clearfix 和 clear 的样式在这里我就不写了。 下面就谈谈对于这两个 class 的用法,首先我们先看个例子: XML/HTML Code...

    CSS技术:清除浮动的最优方法.pdf

    总结来说,清除浮动是CSS布局中非常关键的一个环节,选择合适的方法取决于具体的布局需求和目标浏览器环境。理解各种清除浮动技术的原理和适用场景,可以帮助我们更好地实现复杂的网页设计。随着Web标准的发展,最佳...

    CSS的clear属性清除浮动的基本用法示例

    清除浮动是指通过CSS样式来防止浮动元素对周围元素的影响,确保非浮动元素或后续元素能够正确地在页面上定位,避免内容溢出容器。这通常是为了恢复父容器的正常高度计算,使其能完全包裹住内部的浮动元素。 **使用`...

Global site tag (gtag.js) - Google Analytics