CSS浮动

番茄西红柿发布于2019-04-23 13:33 / 1958人阅读

摘要：除非该元素前面还有一个浮动元素，这时它就会紧挨着前面的元素。真正让人迷惑的是浮动元素会尽可能的居顶，并且垂直定位规则比水平浮动规则的优先级更高。

浮动到底是什么？

它既不是position，但又不在标准流里，那么它究竟是怎么定位的？

浮动一开始作为文字环绕图片产生

DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Documenttitle>  
<style type="text/css">
    
    img {
        width: 60px;
    float: right;
    margin: 20px;
}
.aside{
 float: right;width: 15em;margin: 0 1em 1em;padding: 0.25em;border:1px solid;
}
style>
head> 
<body>
   
   
<img src="icon_head.png" alt="icon_head.png"/>
<p >我是测试文字1我是测试文字我是测试文字2我是测试文字我是测3试文字我是测试文字我是测试文字我是测试文字我是测试文字我是测试文字我是测试文字我是测试文字我是测试文字我是测试文字我是测试文字我是测试文字我是测试文字我是测试文字我4是测试文字我是测试文字我是测试文字我是测试文字我是测试文字我是测试文字我是测试文字我是测试文字我是测试文字我是测试文字我是测试文字我是测试文字我是测试文5字我是测试文字我是测试文字我是测试文字我是测试文字我是测试文字我是测试文字我是测试文字我是测试文字我是测试文字我是测试文字我是测试文字我是测试文字我是测6试文字我是测试p>

<p class="aside">
    
这又是另一端蚊子了
p>
<p >我是测试文字1我是测试文字我是测试文字2我是测试文字我是测3试文字我是测试文字我是测试文字我是测试文字我是测试文字我是测试文字我是测试文字我是测试文字我是测试文字我是测试文字我是测试文字我是测试文字我是测试文字我是测试文字我4是测试文字我是测试文字我是测试文字我是测试文字我是测试文字我是测试文字我是测试文字我是测试文字我是测试文字我是测试文字我是测试文字我是测试文字我是测试文5字我是测试文字我是测试文字我是测试文字我是测试文字我是测试文字我是测试文字我是测试文字我是测试文字我是测试文字我是测试文字我是测试文字我是测试文字我是测6试文字我p>
 body>
html>

文字环绕图片

（如果看不到环绕效果，试试把窗口变小）

float不在标准流，但却会在标准流占位

DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Documenttitle>  
<style type="text/css">
    
    .float{float: left;
    background: red;
    margin: 10px;}
    .bg{background: green;}
style>
head> 
<body>
   
   <div>不浮动元素div>
<div class="float">浮动元素div>
<div class="bg">不浮动元素div>
 body>
html>

占位

这个占位很神奇，浮动元素在下一元素的盒模型内，有点像ps添加了一个层，但这个层不是简单覆盖，而是告诉下一层这个位置我占了，你往旁边去吧！

还有，行内元素被设置浮动后，可以设置高度和宽度，这是为什么呢？

这个行内元素就像被设置成inline-block一样，但和inline-block比又多了浮动的功能，具体原因还不清楚待查

那么浮动到底按照什么顺序组合的？

我们来看代码

DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Documenttitle>  
<style type="text/css">
    ul{list-style: none;width: 350px;}
    ul li{float:left;margin:4px;}
    img {   
    vertical-align: top;
}
style>
head> 
<body>
   
   <ul>
    <li><img src="http://placehold.it/100x100&text=1"/>li>
    <li><img src="http://placehold.it/100x150&text=2"/>li>
    <li><img src="http://placehold.it/100x100&text=3"/>li>
    <li><img src="http://placehold.it/100x100&text=4"/>li>
    <li><img src="http://placehold.it/100x100&text=5"/>li>
    <li><img src="http://placehold.it/100x150&text=6"/>li>
    <li><img src="http://placehold.it/100x100&text=7"/>li>
ul>


 body>
html>

排列

总的来说就是，浮动元素会移到左侧或右侧。除非该元素前面还有一个浮动元素，这时它就会紧挨着前面的元素。

真正让人迷惑的是：浮动元素会尽可能的居顶，并且垂直定位规则比水平浮动规则的优先级更高。

在这个例子中，图片2撑高了该行的高度，所以在放完图片3后，仍然有足够的垂直空间放置图片4。

记住，当你有一个浮动元素(不位于尾行)时，它后面的浮动元素占用的垂直空间必须大于或等于它才会触发换行。

GPU云服务器云服务器浮动-前端-css html浮动向上浮动上下浮动左右浮动

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/2038.html

理解CSS浮动与清理

摘要：浮动为什么会有文本环绕效果产生这个疑问主要来自于以往的印象浮动的元素是脱离文档流的。也就是说，浮动元素的确脱离了文档流，因此文档流中的块框会无视浮动的元素，但是文本不会。作为前端写了很多页面布局，但是浮动这块一直是我似懂非懂的盲点，一方面用浮动能实现很多布局，另一方面浮动造成的影响又会破坏布局让人头疼，所以今天就特地写篇博文解决这块盲点。本文主要讨论以下几个问题：1.浮动的原始用途...

Tonny 2019-08-29 12:23 评论0 收藏0
理解CSS浮动与清理

摘要：浮动为什么会有文本环绕效果产生这个疑问主要来自于以往的印象浮动的元素是脱离文档流的。也就是说，浮动元素的确脱离了文档流，因此文档流中的块框会无视浮动的元素，但是文本不会。作为前端写了很多页面布局，但是浮动这块一直是我似懂非懂的盲点，一方面用浮动能实现很多布局，另一方面浮动造成的影响又会破坏布局让人头疼，所以今天就特地写篇博文解决这块盲点。本文主要讨论以下几个问题：1.浮动的原始用途...

cyqian 2019-08-01 16:39 评论0 收藏0
了解CSS浮动以及清理浮动（Float）

摘要：浮动浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，相当于不占用空间，所以文档的普通流中的块框表现得就像浮动框不存在一样。 CSS浮动浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，相当于不占用空间，所以文档的普通流中的块框表现得就像浮动框不存在一样。 CSS ...

TZLLOG 2019-08-28 18:08 评论0 收藏0
理解CSS浮动与清除浮动

摘要：那我们举个栗子当先声明一个元素向左浮动时，由于脱离文档流，这个元素的右边就会空出一片空间，空间的长宽与浮动元素长宽相同。总结总结下来，浮动与清除浮动的顺序关系如下设置元素浮动，元素脱离文档流，不计算高度。本文主要探讨两个问题：为什么CSS设置浮动会引起父元素塌陷为什么设置clear:both能清除浮动，并撑开父元素。起因 CSS的浮动，算是我在写网页时用的最多的属性之一。但...

刘东 2019-08-30 12:45 评论0 收藏0
CSS-清除浮动

摘要：清除浮动方法方法一使用带属性的空元素在浮动元素后使用一个空元素如，并在中赋予属性即可清理浮动。什么是CSS清除浮动？在非IE浏览器（如Firefox）下，当容器的高度为auto，且容器的内容中有浮动（float为left或right）的元素，在这种情况下，容器的高度不能自动伸长以适应内容的高度，使得内容溢出到容器外面而影响（甚至破坏）布局的现象。这个现象叫浮动溢出，为了防止这个现象...

刘厚水 2019-08-30 12:54 评论0 收藏0
CSS浮动其实很简单

摘要：实验最基本测验浮动实验对应结果实验结果分析因为为块标签，而且处于同一文档流当中，固会向下排列。实验左浮动，右浮动，左浮动浮动实验结果实验结果分析左浮动，所以失去块级作用，并且脱离标准文档流，因此在第一行最左边。其实CSS浮动原理就三句话，不像网上的某些文章说的天花乱坠！浮动必会脱离文档流浮动会失去块级作用浮动只在自己所在位置那行向左或者向右浮动请仔细理解上面这三句话，下面...

Jiavan 2019-08-30 13:58 评论0 收藏0