【CSS】我理解的float

最新推荐文章于 2024-10-10 21:03:04 发布

Catherine_G

最新推荐文章于 2024-10-10 21:03:04 发布

阅读量217

点赞数

分类专栏： CSS 前端文章标签： CSS

本文链接：https://blog.csdn.net/qq_36830885/article/details/100073180

版权

前端同时被 2 个专栏收录

20 篇文章 0 订阅

订阅专栏

CSS

8 篇文章 0 订阅

订阅专栏

注：文本是《CSS权威指南》的学习笔记

文章目录

定义

浮动float：比如浮动图片，使周围的文字包围它
float

<img src="b4.jpg" style="float: left;" alt="b4">

浮动元素，会以某种方式将浮动元素从文档的正常流中删除，不过它还是会影响布局。

一个元素浮动时，其他内容会环绕该元素。
浮动元素周围的外边距不会合并（水平向、垂直向）
float：none;用于防止元素浮动。
浮动元素的包含块是其最近的块级祖先元素。
浮动元素会生成一个块级框，而不论这个元素本身是什么。它会像块级元素一样表现。所以没必要对浮动元素声明display: block;

重叠时

行内框（如strong）与一个浮动元素重叠时，其边框、背景、内容都在该浮动元素之上显示。
块框（如p）与一个浮动元素重叠时，边框和背景在下面，但是内容在该浮动元素上面显示。

img.sideline {float: left; margin: 10px -15px 10px 10px;}
   p.box {border: 1px solid gray; padding: 0.5em;}
   p.box strong {border: 3px double black; background: silver; padding: 2px;}
   h2#jump-up {margin-top: -15px;background: silver; }

<div>
    <img src="images/mao.jpg" class="sideline">
    <p class="box">This iparagrapf, , underremarkableThis iparagrapf, underremarkableThis iparagrapf, underremarkableunderremarkable in most ways, does contain<strong>bbbsbsjhdjh strongly contain text</strong>aaaaaa</p>
    <p> This is a second paragraph </p>
    <h2 id="jump-up">a heading!</h2>
</div>

清除浮动: clear

clear属性 h2{clear：left;}

在这里插入图片描述

clear: both; 确保该元素不与任何浮动元素在同一行上。
clear: none; 允许两边有浮动元素，可以用来覆盖其他样式。
css1\css2增加清除元素的上外边距。css2.1增加了一个清除区域，但是不改变外边距。加的这个清除区域使得清除元素刚好位于浮动元素的下面。no separation
浮动元素底端和清除元素顶端之间如果需要有间隔，那么设置浮动元素的margin-bottom

浮动规则

1、浮动元素的左（或右）外边界不能超出其包含块的左（或右）内边界。
在这里插入图片描述
2、浮动元素的左（或右）外边界必须是源文档之前出现的左浮动（或右浮动）元素的右（左）外边界，除非后出现浮动元素的顶端在先出现浮动元素的底端下面。（防止浮动元素彼此覆盖

3、左浮动元素的右外边界不会在其右边右浮动元素的左外边界的右边；
一个右浮动元素的左外边界不会在其左边任何左浮动元素的右外边界的右边
在这里插入图片描述
4、一个浮动元素的顶端不会比其父元素的内顶端更高。如果一个浮动元素在两个合并外边距之间，放置这个浮动元素时就好像在两个元素之间有一个块级父元素。