浮动布局



<html>

<head>

  <meta charset="utf-8">

  <title>浮动</title>

  <style type="text/css">

       .box1{

             height:50px;

             background-color:red;

             }

       .box2{

             height:50px;

             background-color:blue;

             }

  </style>

</head>

<body>

      <div class="box1"></div>

      <div class="box2"></div>

</body>

</html>

以上为两个基本的div

此时给box1加一个向左浮动：

.box1{

      height:50px;

      background-color:red;

      float:left;

      }

此时结果如下图： 

此时，红色box1不见了

原因：box1里面没有内容，且没有设置宽度，当设置浮动时，尺寸得不到扩展，会缩成一个小圆点，出现在浏览器左上角。

这时候我们给box1填充内容，再来看看效果

 <div class="box1">这里是box1，哈哈哈哈哈哈哈</div>
  • 1

当元素没有设置宽度值，而设置了浮动属性，元素的宽度随内容的变化而变化。

清除浮动

当元素设置浮动属性后，会对相邻的元素产生影响，相邻元素特指紧邻后面的元素，所以有时需要用到清除浮动的方法。

例如. 给box2填充内容：

<div class="box2">这里是box2，哈哈哈哈哈哈哈</div>
  • 1

给box2增添一句向左浮动的代码：

 .box2{

             height:50px;

             background-color:blue;

             float:left;

             }

此时效果如下图： 

在box2的div后增添一个p标签，填充内容：

<p>这里是box2后面的一个段落，紧邻在box2后面，是box2的相邻元素</p>
  • 1

此时效果如下图： 

此时因为p元素为box2的相邻元素，由于box2向左浮动，故对p元素产生了影响。所以现在需要清除浮动，达到p元素在box2下面，独占一行的效果。

清除浮动的方法：

  1. 给需要清除浮动的元素增添属性值：clear:left;/right;/both; 
    即为不允许左侧/右侧/两边有浮动对象。

    注意：这个规则只能影响使用清除的元素本身，不能影响其他元素。

  2. 同时设置 
    1).width:100%;（或固定宽度） 
    2).overflow:hidden;

此时来试试清除浮动的方法 
1）.给p元素增添属性值，达到清除浮动的目的：

p{

clear:left;

}

使用clear:left;指定p元素左边不出现浮动元素，这样p元素被迫下移一行

效果如下图： 

2）.第二种方法也能达到和第一种方法一样的效果，如上图所示。

p{

width:100%;

overflow:hidden;

}
  • 1
  • 2
  • 3
  • 4

现在我将所有的代码全部贴上来：

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

  <title>浮动</title>

  <style type="text/css">

       .box1{

             height:50px;

             background-color:red;

             float:left;

             }

       .box2{

             height:50px;

             background-color:blue;

             float:left;

             }

        p{

        clear:left;  /*清除浮动方法一*/

        /*width:100%;

        overflow:hidden;*//*清除浮动方法二*/

         }

  </style>

</head>

<body>

      <div class="box1">这里是box1，哈哈哈哈哈哈哈</div>

      <div class="box2">这里是box2，哈哈哈哈哈哈哈</div>

      <p>这里是box2后面的一个段落，紧邻在box2后面，是box2的相邻元素</p>

</body>

</html>

《网页布局基础篇》—浮动布局和float属性的更多相关文章

  1. CSS布局 ——从display，position， float属性谈起(转)

    CSS布局 ——从display,position, float属性谈起   页面布局,或者是在页面上做些小效果的时候经常会用到 display,position和float 属性,如果对它们不是很了 ...

  2. IOS自己主动布局中的浮动布局(6)----MyFloatLayout横空出世

    https://github.com/youngsoft/MyLinearLayout 前言 在MyLayout的6大布局中,每种布局都有不同的应用场景. 且每种布局的子视图的约束机制不一样:线性布局 ...

  3. 页面标准文档流、浮动层、float属性（转）

    CSS float 浮动属性介绍 float属性:定义元素朝哪个方向浮动. 1.页面标准文档流.浮动层.float属性 1.1 文档流 HTML页面的标准文档流(默认布局)是:从上到下,从左到右,遇块 ...

  4. 【网页布局基础】css布局学习总结

    三种定位机制 1.标准文档流:从上到下,从左到右输出文档内容 2.浮动 3.绝对定位 需要注意的是块级元素如div p ul 等 行级元素如span strong img input等 块级元素与行级 ...

  5. CSS布局 ——从display，position， float属性谈起

    页面布局,或者是在页面上做些小效果的时候经常会用到 display,position和float 属性,如果对它们不是很了解的话,很容易出现一些莫名其妙的效果,痛定思痛读了<CSS Master ...

  6. 使用flex弹性布局代替传统浮动布局来为微信小程序写自适应页面

    原文转载自「刘悦的技术博客」https://v3u.cn/a_id_109 我们知道,写习惯了前端的人,一般切图后布局页面的话,上手最习惯的是基于盒子模型的浮动布局,依赖 display 属性 + p ...

  7. 《网页布局基础篇》HTML+CSS单列布局--水平居中，垂直居中，水平垂直居中

    https://blog.csdn.net/panlu666_pl/article/details/66480433 一.水平居中 子元素在父元素中水平居中 1.使用 text-align和inlin ...

  8. python 网页爬虫 基础篇

    首先要连接自己的数据库 import pymysql import requests #需要导入模块 db = pymysql.connect('localhost', 'root', '****** ...

  9. （spring-第12回【IoC基础篇】）JavaBean的属性编辑器

    在spring实例化bean的最后阶段,spring利用属性编辑器将配置文件中的文本配置值转换为bean属性的对应值,例如: 代码0011 <bean id="car" cl ...

随机推荐

  1. 单点登录详解（token简述）（七）

    前言 为什么整理单点登录? 主要的原因还是自己以前学习的时候曾经用过,但是时间太久,忘记了里面用到了哪些技术.及如何实现的,每次想到单点登录总是感觉即会又不会,这次整理session时,又涉及到了单点 ...

  2. 第九篇 -- 对数据库mysql进行连接并压测（二）

    上一节介绍了对mysql查询语句的压测,这一节来进一步的了解. 还是先把数据库的图放上来. 接下来打开Jmeter. 1. 回顾一下上一节学的查询语句 JDBC Request配置 结果 2. 条件查 ...

  3. jvm源码解读--16 锁_开头

    现在不太清楚, public static void main(String[] args) { Object object=new Object(); System.out.println(&quo ...

  4. Jenkins配置下拉菜单联动效果

    在使用Jenkins集成时,经常需要配置一些环境信息,由于测试.线上.预发布需要切换环境和域名,需要在Jenkins中配置下拉菜单联动效果. 首先选择参数化构建过程,然后首先配置环境,环境分为:测试环 ...

  5. Mybatis学习笔记-复杂查询

    多个学生,对应一个老师 对于学生而言,关联:多个学生关联一个老师[多对一] 对于老师而言,集合:一个老师,有多个学生[一对多] 复杂查询环境搭建 数据库搭建 CREATE TABLE `teacher ...

  6. 对HashMap的一次记录

    HashMap的具体学习,认识了解. 前言 也是最近开始面试才发现,HashMap是问的真多.以前听学长或自己在网上看到过一些面试资料都在说集合.线程这块比较重要,面试的重点.自己也是有那抵触情绪,所 ...

  7. vue日记②之兼容各种情况的可跳转链接

    兼容各种情况的可跳转链接 需求 因为聊天气泡颜色原因,发送出去的链接通常模糊不清,而且不能直接跳转,所以我打算已a链接的显示直接抓取所有的网页链接,同时还要兼容富文本框的直接输入图片 这是运行效果 实 ...

  8. C++1-100之间 7的倍数 带7 打印 敲桌子

    1 // 1-100之间 7的倍数 带7 打印 敲桌子 2 #include <iostream> 3 using namespace std; 4 5 int main() 6 { 7 ...

  9. 用 getchar putchar 来输入和接收 但是要清空缓冲区

    1 //用 getchar putchar 来输入和接收 但是要清空缓冲区 2 3 #include <stdio.h> 4 int main() 5 { 6 char ch1,ch2; ...

  10. 两年Android开发三面上岸腾讯，这些核心知识点建议收藏

    概述 感觉毕业后时间过得真快啊,从 19 年 7 月本科毕业入职后,到现在快两年了,前段时间金三银四期间想着找一个新的工作,前前后后花了一个多月的时间复习以及面试,面试好几家大厂,最后选择了腾讯.也祝 ...