在实际项目的布局中遇到的很多问题都是因为没有清除浮动而造成的,所以一定要养成写完一部分代码就清除浮动的习惯。 祝学习进步,工作顺利!
1) 行内元素浮动之后可以支持宽高; 2) 文本会给浮动定位的元素让位(可以以此制作文本绕排的效果); 3) 在父级没有给高度的情况下,子级浮动后父级会没有高度; <!DOCTYPE html>内容生成清除浮动#container{border:1px solid #000;padding:20px;background-color:#0000FF;}#d1,#d2,#d3{width:100px;heigh...
浮动布局所带来的影响以及如何清除浮动 2017-02-06 09:31 −... 慕乔_studyTime 6 3238 浮动笔记 2019-12-07 22:38 −一.标准文档流:元素根据块级元素或行内元素的特性按从上到下、从左到右的方式自然排列。 二.display属性用法:display:block/ inline / inline-block / none; 1.display:block; 块...
这是因为浮动元素脱离了标准流到了浮动层,浮动层比标准层要高并且不占据页面空间,所以我们看到div1和div2覆盖在了div3上面,虽然是覆盖但是div3里面的文字会被挤走,此时div3仍然在标准层所以仍然是占据页面空间的。 2. 浮动会将行内元素和行内块元素转化为块元素 上面讲的块元素可以进行浮动,其实对于行元素和行内...
二. 浮动带来的影响 1. 脱离文档流,不占据页面空间 我们知道,css的块级元素比如说div在页面中默认是独占一行并且自上而下排列,也就是我们所说的流,也就是我们通常所说的标准流,接下来我们来看以下的案例: html代码: 复制 150 * 100100 * 150300 * 200 1. 2. 3. css代码: 复制 .div1{width: 150px...
因为该属性的作用是清除浮动对该元素的影响,也就是同级div浮动之后导致浮动元素脱离文档流而使未浮动元素上移,在页面中的显示效果就为浮动元素将未浮动元素遮住,清除之后该未浮动元素就会放置于浮动元素的下方,也就是可以像文档流时的布局效果,但又因为此未浮动元素没有宽高等属性,所以父元素的高度就会基于此元素的...
清除浮动方法 1.overflow:hidden 应用于父元素,而不是当前浮动的元素 缺点:会将子元素超出父元素的部分切割掉。 2.clear:both 不是应用于浮动元素本身,而是应用于浮动元素的后面的元素 缺点:需要额外多余地添加一个标签。 3.::after伪元素(效果最好)