css浮动案例

╰+攻爆jí腚メ 2021-09-15 05:32 352阅读 0赞

## 彼此相邻的浮动元素 ##

![70][]

## 清除浮动 - 使用 clear ##

元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性。

clear 属性指定元素两侧不能出现浮动元素。

使用 clear 属性往文本中添加图片廊：

![70 1][]

使用 float 创建一个网页页眉、页脚、左边的内容和主要内容。

事例案列：

<style>  
\* \{  
    box-sizing: border-box;  
\}  
body \{  
    margin: 0;  
\}  
.header \{  
    background-color: \#2196F3;  
    color: white;  
    text-align: center;  
    padding: 15px;  
\}  
.footer \{  
    background-color: \#444;  
    color: white;  
    padding: 15px;  
\}  
.topmenu \{  
    list-style-type: none;  
    margin: 0;  
    padding: 0;  
    overflow: hidden;  
    background-color: \#777;  
\}  
.topmenu li \{  
    float: left;  
\}  
.topmenu li a \{  
    display: inline-block;  
    color: white;  
    text-align: center;  
    padding: 16px;  
    text-decoration: none;  
\}  
.topmenu li a:hover \{  
    background-color: \#222;  
\}  
.topmenu li a.active \{  
    color: white;  
    background-color: \#4CAF50;  
\}  
.column \{  
    float: left;  
    padding: 15px;  
\}  
.clearfix::after \{  
    content: "";  
    clear: both;  
    display: table;  
\}  
.sidemenu \{  
    width: 25%;  
\}  
.content \{  
    width: 75%;  
\}  
.sidemenu ul \{  
    list-style-type: none;  
    margin: 0;  
    padding: 0;  
\}  
.sidemenu li a \{  
    margin-bottom: 4px;  
    display: block;  
    padding: 8px;  
    background-color: \#eee;  
    text-decoration: none;  
    color: \#666;  
\}  
.sidemenu li a:hover \{  
    background-color: \#555;  
    color: white;  
\}  
.sidemenu li a.active \{  
    background-color: \#008CBA;  
    color: white;  
\}  
</style>  
</head>  
<body>  
  
  
<ul class="topmenu">  
  <li><a href="\#home" class="active">主页</a></li>  
  <li><a href="\#news">新闻</a></li>  
  <li><a href="\#contact">联系我们</a></li>  
  <li><a href="\#about">关于我们</a></li>  
</ul>  
  
  
<div class="clearfix">  
  <div class="column sidemenu">  
    <ul>  
      <li><a href="\#flight">The Flight</a></li>  
      <li><a href="\#city" class="active">The City</a></li>  
      <li><a href="\#island">The Island</a></li>  
      <li><a href="\#food">The Food</a></li>  
      <li><a href="\#people">The People</a></li>  
      <li><a href="\#history">The History</a></li>  
      <li><a href="\#oceans">The Oceans</a></li>  
    </ul>  
  </div>  
  
  
  <div class="column content">  
    <div class="header">  
      <h1>The City</h1>  
    </div>  
    <h1>Chania</h1>  
    <p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.</p>  
    <p>You will learn more about responsive web pages in a later chapter.</p>  
  </div>  
</div>  
  
  
<div class="footer">  
  <p>底部文本</p>

</div>

![70 2][]

![70 3][]

[70]: /images/20210813/c1f4c172d3ab445290f7115671c07dc6.png
[70 1]: /images/20210813/27af411ff26c45a7a5fa76276b4fcf87.png
[70 2]: /images/20210813/fe1a19248560491f9ee44496ac326ad5.png
[70 3]: /images/20210813/b01f388f78a54255891eb72ba7f3d8f4.png

发表评论取消回复

表情：

评论列表（有 0 条评论，352人围观）

还没有评论，来说两句吧...

相关阅读

相关 css浮动

文章目录 1.其他样式 1.1 圆角边框 1.2 盒子阴影 1.3 文字阴影 2

迈不过友情╰/ 2024年03月17日 17:25/ 0 赞/ 76 阅读

相关 CSS_浮动

浮动作用：可以使块元素水平排列 <body> <style> .box5 { width: 100px; h

短命女/ 2023年10月06日 16:51/ 0 赞/ 37 阅读

相关 CSS 浮动

文章目录一、为什么需要浮动二、什么是浮动三、浮动特性 1.脱离标准流 2.一行内显

亦凉/ 2023年09月28日 22:09/ 0 赞/ 35 阅读

相关 CSS浮动

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

淡淡的烟草味﹌/ 2023年07月09日 08:29/ 0 赞/ 159 阅读

相关 CSS浮动详解及案例

文章目录一、简介 1.1 定位方式 1.2 浮动元素 1.3 层叠关系二、浮

àì夳堔傛蜴生んèń/ 2023年02月23日 08:53/ 0 赞/ 22 阅读

相关 CSS浮动

浮动元素脱离文档流使用float脱离文档流时，其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在该元素的周围。 <pre style=

旧城等待，/ 2023年01月10日 10:21/ 0 赞/ 238 阅读

相关 CSS浮动——浮动的特性、清除浮动

CSS浮动一个页面基本包含了三种布局方式：标准流、浮动和定位浮动（float）浮动可以改变元素标签默认的排列方式，最典型的是可以让多个块级元素一行内排列显示

一时失言乱红尘/ 2022年11月22日 12:52/ 0 赞/ 320 阅读

相关 CSS-浮动

1.浮动(float)的基础知识 float:left;向左浮动 float:right;向右浮动 float:none;元素不浮动 float:inherit

绝地灬酷狼/ 2022年05月03日 03:28/ 0 赞/ 334 阅读

相关 css浮动

css浮动和清除浮动在写页面的过程中，浮动是大家经常用的属性，在好多的排版布局中都是用的浮动；定义：使元素脱离文档流，按照指定的方向移动，直到边缘碰到包含框或者另一个

男娘i/ 2021年11月02日 06:58/ 0 赞/ 452 阅读

相关 css浮动案例

彼此相邻的浮动元素 ![70][] 清除浮动 - 使用 clear 元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属

╰+攻爆jí腚メ/ 2021年09月15日 05:32/ 0 赞/ 353 阅读