CSS-float 特性及应用总结

最新推荐文章于 2022-04-12 09:21:05 发布
最新推荐文章于 2022-04-12 09:21:05 发布
阅读量1.6k 收藏 1
点赞数
分类专栏： CSS 文章标签： CSS float 浮动特性
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qiqingjin/article/details/50408562
版权

1.      float的结果

包裹、坚挺、隔绝、破坏

2.      清除浮动带来的影响

方法：浮动元素底部加 clear:both 的空div（margin重叠）

            父元素BFC化（无margin重叠）

            .clearfix:after{

                  content:“”;

                  display:block;

                  height:0;

                  overflow:hidden;

                  clear:both;

}

.clearfix{

         *zoom:1;

}

或

.clearfix:after{

         content:“”;

         display:table;

         clear:both;

}

.clearfix{

         *zoom:1;

}

3.      浮动的滥用

浮动后：block化及去空格，使得浮动适合砌砖头。但是这样布局容易造成页面块滑动，而且每个块大小必须固定。

4.      用浮动实现流体布局

4.1   单侧固定，另一侧自适应布局（左浮动）

左侧（固定）：width，float:left/float:right

右侧（自适应）：padding-left/margin-left/padding-right/margin-right

4.2   单侧固定，另一侧自适应布局（右浮动）

左侧（自适应）：把需浮动元素外包裹一层div：width：100%; float:left;

                               需浮动元素：margin-right:左与右需空出的大小+右侧固定元素大小;

右侧（固定大小）: width:右侧固定元素大小; float:left; margin-left:-右侧固定元素大小;

4.3   两侧自适应布局

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>test 流体布局</title>
	<style>
	 .rightphoto{
      float:left;
      margin-right: 20px;
      width:100px;
   }
   .leftdiv{
      display: table-cell;
      *display: inline-block;
      width:2000px;
      *width:auto;
   }
   .leftphoto{
      line-height: 22px; 
      padding-bottom: 6px; 
      font-size: 14px;
   }
	</style>
</head>
<body>
  <!-- 左右和实际情况是反的，，，是我愚钝了 -->
  <a href="#" class="rightphoto"><img src="P_00.jpg" alt="hello"/></a>
  <div class="leftdiv">
    <p class="leftp">12月25日为本月最后一个周五，按照惯例，图书馆将进行内部学习。12月25日（周五）下午闭馆，晚上5点照常开放，望广大师生读者周知。</p>
    <img src="P_01.jpg" class="leftphoto" alt="hi"/>
  </div>
</body>
</html>

柒青衿
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
float特性理解（二）
u014387696的博客
03-16 372
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>float特性</title> <style> div{ width: 300px; height: 300px; } .t1{ back...
详解CSS float属性
weixin_30338497的博客
11-08 879
CSS中的float属性是一个频繁用到的属性，对于初学者来说，如果没有理解好浮动的意义和表现出来的特性，在使用的使用很容易陷入困惑，云里雾里，搞不清楚状态。本文将从最基本的知识开始说起，谈谈关于浮动的应用，出现的问题和解决方案。 基础知识 float，顾名思义就是浮动，设置了float属性的元素会根据属性值向左或向右浮动，我们称设置了float属性的元素为浮动元素。浮动元素会从普通文档流中脱离...
CSS-float详解
weixin_33750452的博客
08-09 279
首先我们了解到，CSS网页布局的原理，就是按照HTML代码中对象声明的顺序，以流布局的方式来显示它，而流布局就不得不说到float浮动技术。.在HTML中的所有对象，默认分为两种：块元素(block element)、内联元素(inline element)，虽然也存在着可变元素，但只是随上下文关系确定该元素是块元素或者内联元素。 其实CSS的float属性，作用就是改变块元素(block el...
CSS float 浮动属性
weixin_34174422的博客
07-25 242
　　本篇主要介绍float属性：定义元素朝哪个方向浮动。 目录 1. 页面布局方式：介绍文档流、浮动层以及float属性。 2. float:left ：介绍float为 left 时的布局方式。 3. float:right ：介绍float为 right 时的布局方式。 4. 相邻元素含有float属性：介绍相邻元素含有float属性时的布局方式。   1. 页面布局方式 页面...
float的应用
jhj124的博客
09-26 211
浮动 通过浮动可以设置一个元素向它的元素左侧或者右侧移动 可选值 none 默认值 元素不浮动 left 元素向左浮动 right 元素向右浮动 特性 1.文本环绕 2.有多行浮动元素的情况 多个盒子浮动 从左往右依次浮动 一行排列不下“换行”排列 3.块级化 将元素强行转换为块级元素。它具有块级元素的所有性质， 但是不具有独占一行和父元素100%宽度的特性，宽高由里面的元素撑开 4.换行方式： 水平排列之后，如果当前排列不下，会原地往下缩直到有空间可以浮动排列 开发的时候，尽量保证浮动元素都等高
CSS-CC-42-float-3:CSS要点中的布局属性简介
03-28
本篇文章将深入探讨`float`属性以及其在CSS布局属性中的应用。 首先，让我们理解`float`属性的基本含义。`float`属性用于指定元素应向哪一侧浮动，以便其他内容可以围绕它流动。默认情况下，HTML元素是按照流式布局...
CSS-float详解.pdf
07-19
通过本文档，我们将深入探讨`float`属性的基本概念、工作原理以及常见应用场景，帮助读者更好地理解和运用这一特性。 #### 二、CSS `float` 属性概述 ##### 2.1 基本概念 在HTML文档中，每个元素都有其默认的显示...
深入理解和应用css中Float属性
09-24
本文将深入探讨`float`属性的特性、应用场景以及它在解决布局问题中的作用。 一、`float`的特性 1. **文字围绕图片**：`float`属性最经典的用途是实现文本环绕图片的效果。当一个`img`标签设置了`float`属性，如`...
前端项目-float-label-css.zip
09-03
在前端开发领域，"float-label-css" 是一个利用纯CSS实现的浮动标签输入框样式项目。这个项目的主要目的是为用户提供一种优雅的界面设计，尤其是在移动设备上，使得表单填写更加直观和便捷。"浮动标签"（Float Label...
CSS无难事-浮动floatright的应用和li的高度问题.pdf
10-04
在“CSS无难事-浮动floatright的应用和li的高度问题”这个主题中，我们将探讨`float:right`的用法以及`<li>`元素高度问题的解决策略。 首先，让我们了解`float:right`。当将一个元素的`float`属性设置为`right`时，...
float浮动的特性以及清除浮动
weixin_50857160的博客
02-02 1469
一、我们在给标签设置浮动后，会有一下几个特点：浮动也就是我们所说标签对象浮动居左靠左（float:left）、浮动居右靠右(float:right)和不浮动（float:none）。 1.不浮动（float：none）；所谓的标准流 标准文档流由块级元素和内联元素两类元素组成，在标准文档流中块级元素独自占一行，从上向下的顺序进行排列；行内元素按从左往右的顺序进行排列，遇到父级元素的边沿会自动换行排列 2.左浮动（float：left），这个时候浮动的元素从左到右并排显示，元素之间相互贴靠。 3.右浮动（
CSS中水平布局手段浮动float属性及其需掌握的特点
王春燕的博客
04-12 554
一、浮动的介绍 块元素在文档流中默认垂直排列，所以这个三个div自上至下依次排开，如果希望块元素在页面中水平排列，可以使块元素脱离文档流 使用float来使元素浮动，使一个元素向其父元素的左侧或右侧移动，从而脱离文档流 可选值： none，默认值，元素默认在文档流中排列 left，，向页面的左侧浮动 ...
CSS中float的应用
GDUT_YIFEI
09-22 691
自从工作了之后就没更新博客。 工作了之后从事了前端和后台的工作， 好多事情都要从头开始学。 刚入职不久就丢了不少很杂碎的任务给我。在刚开始调样式的时候觉得好心累， 感觉都控制不了那些样式， 又不能像做Android的XML界面那样拖来拖去， 好烦。 今天接触了一天float， 感觉还是挺多学问的。 浮动的规则： 浮动有四个属性值可以设置： .foo{ float: left |
【float的使用】
wanyuwenrou的博客
12-06 708
在html中经常用到div进行布局，而在div布局中，float（浮动）的使用几乎是必不可少的。 float经常用作div和li的排版布局。可以使div和li并排。这里用div演示。 给这两个div加上float：left；属性 ，效果如下： 在id为b的div后面添上一个div，效果如下： ...
css中的float知识点总结
charlene0824的博客
07-21 2737
看了张鑫旭大神的两篇关于float（CSS float浮动的深入研究、详解及拓展(一),CSS float浮动的深入研究、详解及拓展(二)）的文章，这里总结一下float的知识首先，浮动的根本目的是实现网页中的文字环绕效果。浮动的本质是包裹性和破坏性。包裹性体现在浮动是一个带有方位的display：inline-block属性。浮动的破坏性体现在通过浮动破坏了元素自身的高度。浮动元素对其他元素的影响
【笔记】浮动属性float的应用02——浮动图像和标题
二木成林
12-01 567
第1步 - 从一段文字和一张图片开始 对于本练习，我们希望将图像强制到右侧以允许内容与其一起流动。我们还想在图像下面有一个标题。 代码如下所示： &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;style type="text/css"&gt; &lt;/style&gt; &lt;/head&gt; &lt;body&
HTML+CSS布局之float属性的应用与清除
weixin_49830573的博客
02-01 679
前言 在使用DIV+CSS样式布局时，经常会使用使用一些属性对标签进行控制，比如：float属性和position属性，本文将详细讲解float属性的基础用法和清除方法，希望能对大家有所帮助，不足之处还望海涵。 float的应用 一、定义浮动的语法格式：选择器{float:属性值} 其中float常用的属性值有left、right、none，分别代表标签左浮动，右浮动，不浮动（默认值）,下面将结合一个简单的实例来分别介绍三种属性。 1.不浮动（none） 如果将float设置为none(默认值)，box1、
【笔记】浮动属性float的应用08——液体两列布局
二木成林
12-06 331
第1步 - 从语义标记的代码开始 要将页面布置为两列，您需要从基本页面结构开始。在这种情况下，我们将使用一些虚拟内容来创建两列模板。页面已分为五个单独的div，每个div都有一个唯一的ID选择器。div被标记; “容器”（包裹整个页面的内容），“top”（用于顶部横幅），“leftnav”（用于较小的左列），“content”（用于主要内容）和“footer”（用于页面底部的页脚）。 在本教程...
【笔记】浮动属性float的应用05——使用列表浮动下一个和后一个按钮（所有步骤组合在一起）
二木成林
12-01 374
第1步 - 从一段文字和一个列表开始 在本练习中，我们希望向左浮动一个“后退”按钮，在右侧浮动一个“下一步”按钮。我们可以使用两个div，但为了简单起见，我们将使用两个列表项。 我们将从一段文本和一个简单列表开始。UL使用ID选择器（id =“navigation”）设置样式，并且两个LI使用类选择器（class =“left”和class =“right”）设置样式。这里可以使用任何名称。 ...
深入理解CSS Float：布局与应用解析
总结来说，CSS Float是理解网页布局基础的关键部分，尽管现在有更先进的布局方法，但在很多现有项目和历史代码中仍然广泛使用。理解并熟练掌握浮动原理，对于维护和开发网站仍然具有很高的价值。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值