`
SwordShadow
  • 浏览: 271022 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

CSS 浮动与清除

    博客分类:
  • css
css 
阅读更多

CSS清除与浮动

特点:

父元素默认不包含浮动元素

浮动元素脱离了文档流,其父元素也看不到它了,因而也不会包围它;原来紧跟其后的元素就会在空间允许的情况下,向上提升与浮动元素平起平坐

如果有两个相邻元素,第一个浮动,第二个清除,清除后它就会呆在浮动元素下方

围住浮动元素的三种方法:

第一个方法很简单,缺点是不太直观,即为父元素应用overflow:hidden,以强制它包围浮动元素。

第二种促使父元素包围其浮动子元素的方法,是也让父元素浮动起来。

第三种添加非浮动的清除元素:第三种强制父元素包含其浮动子元素的方法,就是给父元素的最后添加一个非浮动的子元素,然后清除该子元素。

div元素

使用clearfix规则

.clearfix:after {   
  content:".";  
  display:block;  
  height:0;   
 visibility:hidden;
 clear:both;}

 
 

 

 

 

 

分享到:
评论

相关推荐

    CSS浮动与清除浮动

    今天是第一次写博客,已经迫不及待地想把这周在逆战班学习的内容分享一下,这是我对css浮动与清除浮动的理解,希望可以帮助你。 CSS浮动与清除浮动( 本文以div元素布局为例。) 前言:由于CSS内容比较多,只能有...

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

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

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

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

    CSS2中文参考手册+CSS浮动

    CSS浮动是网页布局中一个重要的概念,主要用于创建多列布局。当一个元素被设置为浮动(float:left或float:right),它将从当前的流中移出,向左或向右移动,直到碰到边框或者另一个浮动元素。这个特性在早期网页设计...

    CSS浮动详解及其解决方案

    使用场景及目标:适用于各类需要进行灵活左右布局的情况,特别针对希望通过CSS浮动方式构建高效稳定的网页排版的学习与实操。 其他说明:本文档提供了丰富的实例帮助理解概念和技术点,并探讨不同清除浮动方法的技术...

    CSS 浮动.pdf

    **CSS浮动详解** 浮动(Float)是CSS布局中一种古老但仍然重要的技术,它最初设计用于创建多列布局,如杂志或报纸的版面设计。浮动元素会从当前的正常文档流中移出,向左或向右移动,直到它们的边框接触到包含它们...

    DIV+CSS布局:CSS浮动float属性详解[归纳].pdf

    CSS浮动float属性详解 在Web开发中,布局是非常重要的一方面,浮动float属性是CSS布局中非常关键的属性。通过对浮动float属性的理解和掌握,我们可以更好地实现网页的布局和排版。 Float浮动属性基本释义 float...

    css中3种清除浮动方法

    为了解决这个问题,CSS提供了多种清除浮动的方法。本文将详细讲解三种清除浮动的方法。 1. **传统方式:添加额外的 clearing div** 在浮动元素之后,可以添加一个额外的`<div>`并为其设置样式`clear: both;`。这...

    CSS 浮动布局的练习 Demo,名为 古诗欣赏

    在本文中,我们将深入探讨与"CSS浮动布局"相关的知识点,通过一个名为“古诗欣赏”的练习Demo来学习和理解这一重要概念。这个Demo旨在帮助我们掌握如何利用CSS的浮动特性来实现美观的网页布局。 首先,让我们了解...

    CSS浮动属性Float详解[收集].pdf

    CSS浮动属性Float详解 CSS浮动属性Float是CSS中的一种定位方式,它可以使元素在网页流中浮动,周围的元素可以围绕它排列。浮动元素仍然是网页流的一部分,这与使用绝对定位的页面元素不同。绝对定位的页面元素被从...

    css浮动的有关问题

    ### CSS 浮动基础知识与常见问题解析 #### CSS 浮动概述 在CSS布局中,`float`属性是一个非常重要的概念,它允许元素脱离文档流并漂浮到一边,这样其他内容可以环绕在该元素周围。`float`属性主要用于创建多列布局...

    (转载)CSS浮动(二)

    本文将深入探讨CSS浮动,从基础理论到高级应用,旨在帮助读者全面理解这一关键特性。 首先,我们需要理解“浮动”的基本含义。在CSS中,浮动元素会离开其正常文档流,向左或向右移动,直到其边缘碰到包含框或另一个...

    div+css清除浮动

    div+css清除浮动

    DIVCSS布局:CSS浮动float属性详解.doc

    **CSS浮动(float)属性详解** 在现代网页设计中,`DIV CSS`布局是构建响应式和灵活页面结构的关键。其中,CSS的`float`属性扮演着至关重要的角色,它允许元素在页面上浮动,以便创建复杂的布局和多列设计。在传统...

    css浮动元素

    本文将深入探讨“CSS浮动元素”这一核心概念,以及它在网页布局中的应用。 浮动元素是CSS布局中的一个关键特性,它允许元素脱离其正常文档流,并向左或向右移动,直到其边缘碰到容器的边框或者另一个浮动元素。这个...

    css 浮动实例c#网站开发

    浮动和清理 实例 1.float 属性的简单应用 使图像浮动于一个段落的右侧。 2.将带有边框和边界的图像浮动于段落的右侧 使图像浮动于段落的右侧。向图像添加边框和边界。...本例演示如何使用清除元素侧面的浮动元素。

    CSS-清除浮动

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

Global site tag (gtag.js) - Google Analytics