浮动定位常见问题

最新推荐文章于 2022-07-13 16:42:08 发布
最新推荐文章于 2022-07-13 16:42:08 发布
阅读量332 收藏
点赞数
分类专栏： web-css基础
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LiXSnow/article/details/84452481
版权

给元素设置position：absolute后，使用margin：0 auto居中失效；
因为margin:0 auto;是根据上一级元素来居中的；
解决:
left: 50%;
transform：translate（-50%）；
实现居中。

z-index属性必须配合定位来使用，否则无效

float:left;
-float脱离文档流
-其他元素占用被float元素的位置
-其他元素的文本仍然收到float元素影响

LiXSnow
关注
专栏目录
标准流 浮动 定位 常见页面布局
m0_61700036的博客
10-15 377
一、盒子模型布局 <style> #leader{ width: 800px; height: 100px; background-color: rgb(31, 228, 195); margin: 0 auto; } #d1{ width: 800px; height: 400px; margin: 0 auto; }
绝对定位(absolute)和浮动定位(float)分析
09-25
在网页设计中，布局是至关重要的，而绝对定位和浮动定位是CSS中两种常见的布局技术。它们各有特点，能够独立使用，也可结合使用以达到更复杂的布局效果。 **绝对定位(Absolute Positioning)** 绝对定位允许开发者...
css 的定位和浮动问题（1）
helloworlddm的博客
01-27 342
以下内容来自w3c和一些代码测试： 定位的基本思想很简单，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。 div、h1 或 p 元素常常被称为块级元素。这意味着这些元素显示为一块内容，即“块框”。与之相反，span 和 strong 等元素称为“行内元素”，这是因为它们的内容显示在行中，即“行内框”。 CSS 有三种基本的定位机制：普
浮动产生的问题以及解决办法
weixin_43700362的博客
12-10 581
浮动产生的问题： 子元素脱离文档流不占位，父元素的高度撑不起来，下面的元素会往上移动。 解决办法： 1 ，给浮动元素的父元素设置高度（但是不灵活） 2，给浮动元素的父元素设置overflow:hidden/scroll/auto （常用） 溢出隐藏，父元素要知道子元素是否溢出，浮动元素也参与计算 3,在浮动元素的后面加一个空的块元素（二者是兄弟元素，非父子元素）。给这个空的块元素设置clear:...
浮动问题的产生的原因及常见解决方案。
weixin_44017778的博客
05-07 720
原因：元素浮动以后，脱离正常文档流，导致父元素高度为0，会影响与浮动元素父级盒呈现并列关系的后续元素的正常布局。 解决方案： 1.为浮动元素的父级盒，设置固定的高度——不够灵活 2.为浮动元素的父级盒，设置浮动——会产生新的浮动问题 3.为浮动元素的父级盒，设置overflow属性，属性值hidden|scroll|auto——可能会导致内容显示不完全，代码简洁 4.为浮动元素父集合开启BFC 5.在浮动元素之后，与浮动元素呈现并列关系的位置，加一个空div(不设浮动，没有尺寸，没有内容)，在空
再谈定位和浮动的问题
qq_41633396的博客
06-01 207
开启浮动和定位（绝对定位和固定定位）元素都会脱离文档流 脱离文档流的元素有哪些特点？ 对别人：高度塌陷，宽度塌陷的问题，开启浮动或者是定位的元素的父元素的宽和高不再由开启浮动或者是定位的元素的宽和高来决定，也就是开启浮动或者是定位的元素的宽和高对其父元素的宽和高没有影响 对自己：自己可以设置宽和高了，当然也有默认的宽和高（默认的宽和高由其元素的宽和高来决定了），特别注意的是，当一个元素开启了（绝对定位或者是固定定位以后）定位后， ...
关于float引起的定位问题
才不是小弱鸡的博客
07-07 519
0x00 遇到的问题 前几天，在编写自己的网站时遇到了一个定位问题，问题如下 本站热门的容器，定位本应该在本站热门那里，而这里定位居然跑到上面去了。 0x01 float的一个特性 当容器被直接定义了float属性后，该容器的高度将变为0. 0x02 该问题的解决办法 这里我仔细检查了代码，果然在本站热门上面的轮播图容器中发现了直接定义在容器里面的floa...
HTML浮动与定位
01-19
另一种常见的清除浮动的方法是使用`overflow`属性，通常将父元素的`overflow`属性设置为`auto`或`hidden`。 ```css .parent { overflow: auto; } ``` 这种方法可以有效地包含内部的浮动元素，并且不会对其他元素...
CSS3定位和浮动详解
09-24
清除浮动的方法有多种，常见的包括： 1. 使用clear属性：在浮动元素之后添加一个新元素，并给它设置clear属性，使其不与任何浮动元素相邻。 2. 触发layout：对于IE6这样的老旧浏览器，可以通过设置zoom: 1来触发...
js页面滚动时层智能浮动定位实现(jQuery/MooTools)
10-28
页面滚动时层智能浮动定位的实现是一个常见而又实用的前端开发技术，它能够提升用户界面的可用性和美观度。在这个实现过程中，主要涉及到的技术知识点包括了对滚动事件的监听、页面元素的定位方式以及浏览器兼容性...
float带来的问题
OZCNO的博客
03-31 538
因为浮动定位不属于正常的页面流，所以当子元素都是浮动元素时，非浮动的父容器在显示时不会考虑子元素的位置，这样子父元素就会出现坍塌的现象。 解决方法 1.添加空元素 在父容器末尾添加一个空元素，并且清除浮动,如： //html &lt;div class="layout"&gt; &lt;div class="content"&gt;&lt;/div&gt; &...
左浮盒子和定位练习
淡淡的芦苇的博客
08-07 716
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;小米&lt;/title&gt; &lt;style type="text/css"&gt; bo
一起绝对定位失败的案例分析
甘焕的博客
11-25 2110
利用元素的hover特性做一个浮动菜单，相关的LESS代码如下：li.sti-menu-parent { position : relative; >a { i:first-child, span.txt { display : none; } } /* 先隐藏浮动菜单 */ >ul.sti-menu-s
浮动带来的问题以及清除浮动的几种方式
weixin_57677300的博客
07-13 1715
很多网页布局效果，标准流是做不到，所以就要是用浮动来完成布局，浮动可以改变排列方式。如果一个元素浮动，则该元素之前的元素也需要浮动;否则会影响页面显示的结构演示第四种解决方案，前面三个很简单。未清除浮动效果 未清除浮动高度塌陷 已清除浮动效果 效果完美......
浮动，定位及兼容性问题
helenjuan的博客
07-20 945
第一章 一、内联块 display: inline-block; 1、特征： 1.1 块级元素在一行显示 （得到内联元素的属性） 1.2 内联元素支持宽高 （得到块的属性） 1.3 没有宽度的时候，内容撑开宽度 （得到内联元素的属性） 1.4 标签之间的换行间隙被解析（问题） （得到内联元素的属性） 1.5 ie6 ie7 不支持块级元素的 inline-block（问题） 二、浮动 1、float: [ left | right
关于float的值与浮动失效问题
热门推荐
lj403669131的博客
04-02 1万+
float属性定义在哪个方向浮动，有三个值，分别为left,right,none,inheirt。 left : 向左浮动 right：向右浮动 none:不浮动 inheirt:从父元素继承float属性的值 <style> .div1{ width:300px; height:200px; float:left; } .div2{ width:300px; height:300px; flo
理解浮动以及解决浮动带来的问题
碉堡飞哥的博客
08-20 2001
要解决浮动带来的各种问题，首先我们得了解浮动的特点和造成的问题，方能对症下药。 一、浮动的特点 在CSS2.1 规范中，对浮动的解释如下： 浮动元素脱离文档流，在当前行的左边或是右边对齐，如果当前行没有足够的空间，它将下移一行，直到有足够的空间。浮动元素碰到包含它的边框或者浮动元素的边框停留。 二、浮动造成的问题 （1）父元素的高度无法被撑开 关于这个一点，就不演示了。 （2）浮动元...
关于CSS浮动与绝对定位的个人感悟，看完这篇文章能得到很多相关问题的解释
sinat_28050007的博客
09-06 3324
个人经过千辛万苦从网上搜索资料，现总结关于CSS浮动与绝对定位的相关知识，相信一定能解决您在进行网页布局是遇到的一系列问题！！！！！
CSS浮动常遇问题及解决方法
gladys_1111的博客
02-10 1052
在给元素设置为浮动后并没有出现预期的效果：这个问题是编程过程中常见问题，特别是对于初学者来说。我就自己平时出现的问题说一下可解办法：可能问题一：两个同级元素需要并排显示，却以为只给第二个元素设置浮动就会达到效果，结果出现下图所示效果： （即和原效果没什么不同） 其实这还是对浮动理解不深的缘故。如果第一个元素不是浮动，第二个浮动，两个元素是不会显示在一行的，只有第一个元素浮动，第二个浮动也浮
浮动定位
最新发布
05-30
浮动（float）是 CSS 中一种常见的定位方式，通过将元素从正常文档流中脱离出来并向左或向右移动，从而实现对页面的布局和排版。 浮动元素可以通过 `float` 属性进行设置，常见的属性值有 `left`（向左浮动）和 `right`（向右浮动）。例如，下面的 CSS 代码会将 `div` 元素向左浮动： ```css div { float: left; } ``` 浮动元素会脱离出正常文档流，使得后续元素可以环绕在其周围，因此浮动元素常用于实现多栏布局、图文混排等效果。同时，浮动元素也可以设置宽度和高度等样式属性，但需要注意的是，设置了浮动属性的元素会导致其父元素的高度塌陷，需要通过清除浮动（clear float）来避免这种问题。 除了浮动之外，CSS 中还有其他的定位方式，包括相对定位（relative）、绝对定位（absolute）和固定定位（fixed）等。每种定位方式都有其特点和应用场景，需要根据具体情况选择合适的方式进行布局和排版。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值