前端如何让浮动的div不溢出

前端基础之CSS(浮动-解决溢出-实现个人头像框)

目录一:浮动float 1.什么是浮动? 2.浮动的作用 3.浮动有两个特点 4.float格式二:代码实现左右浮动边框三:浮动造成父标签塌陷问题(清除浮动) 1.浮动会造成父标签的影响三:清除浮动的副作用(父标签塌陷问题) 1.自己加一个div设置高度 2.利用clear属性 3.通用的解决浮动带来的影响方法四:overflow溢出属性 1.当代码出现溢出时 2.解决代码溢出五:代码溢出的应用场景 1.实现个人头像 2.解决设置头像照片溢出问题 3.圆形头像示例一:浮动float

写给后端的前端笔记：浮动（float）布局

写给后端的前端笔记:浮动(float)布局这篇文章主要面向后端人员,对前端有深刻了解的各位不喜勿喷. 起因前一阵子我一个后端的伙伴问我,"前端的左飘怎么做?",我立马就懵了,"居然有这种操作?",过去看了一眼,大概知道他说的左飘就是左浮动float: left 这么看来,后端的同僚对前端css布局的了解基本处于小白阶段. 于是就有了这篇文章. 浮动我们可以这样理解浮动,图中有页面,div1,div2,div3,div4. <div id="di

jQuery实现的浮动层div浏览器居中显示效果

本文实例讲述了jQuery实现的浮动层div浏览器居中显示效果.分享给大家供大家参考,具体如下: 1.在页面的head中引入jQuery <script type="text/javascript" language="javascript" src="jquery-1.7.2.min.js"></script> 2.在页面的head中加入浮动层和遮罩层的样式 <style> #previewDiv{z-ind

让几个横向排列的浮动子div居中显示的方法

div设置成float之后,就无法使子div居中显示了,那么如何让几个横向排列的浮动的div居中显示呢,下面有个不错的方法,希望对大家有所帮助 div设置成float之后,在父div中设置text-align:center,就无法使子div居中显示了,不过我们可以使用变通的方法达到这一效果,就是在父div上再套一个div,如下: 复制代码代码如下: <div id="outerdiv" style="text-align:center;"> <d

前端CSS浮动、定位、溢出、z-index、透明度

一.浮动float 在 CSS 中,任何元素都可以浮动. 浮动元素会生成一个块级框,而不论它本身是何种元素. 关于浮动的两个特点: 浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止. 由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样. 三种

css最终章之浮动、定位、溢出属性处理、z-index属性、透明度

上期内容回顾 CSS简介 # 主要就是给HTML标签添加样式 # 固定语法结构选择器 {属性名1:属性值;属性名2:属性值} 三种引用方式 1.link标签引入外部css文件(最正规) 2.HTML文档结构中的head标签内通过style标签内部直接编写(一般用于学习时期) 3.直接在标签内部通过style属性编写(不常用) 诸多选择器 # 一个页面上有很多相同的标签但是需要有不同的样式 1.基本选择器 id选择器类选择器标签选择器通用选择器 2.重要选择器儿子选择器后代选择器毗

17 ， CSS 区块、浮动、定位、溢出、滚动条

1.CSS 中区块的使用 2.CSS 中浮动的使用 3.CSS 中定位的使用 4.CSS 中溢出的使用 5.CSS 中滚动条的使用 17.1 CSS 中区块的使用属性名称属性值说明 width 像素/百分比区块的宽度 auto height 像素/百分比区块的高度 auto min-height 像素像素/百分比区块最小高度 auto max-height 像素像素/百分比区块最大高度 auto min-width 像素像素/百分比区块最小宽度 auto max-width 像素

CSS清除浮动&内容居中&文字溢出

学习! 1.CSS清除浮动的方法 (1)添加标签清除浮动: 在浮动元素结尾处,并列的添加标签<div style="clear:both;"></div>.(增加无意义标签不建议使用) <ul> <li style="float: left;"></li> <li style="float: left;"></li> <li style="floa

关于css清除浮动，解决内容溢出的问题

以前在布局的时候总会遇到这样的问题,比如我想让整体的内容居中,所以会这样写, .main-content{ width:960px:height:300px;margin:0px auto; } 然后再在这个大的盒子中一次摆放小的DIV,并加上floa:left;属性,但有时候会出现这种情况, 当加上float之后,子DIV 的高度会溢出父DIV, 可以用以下办法 .main-content{ width:960px:height:;margin:0px auto; overflow:auto

CSS区块、浮动、定位、溢出、滚动条

CSS中区块的使用 CSS中浮动的使用 CSS中定位的使用 CSS中溢出的使用 CSS中滚动条的使用 17.1 CSS中区块的使用属性名称属性值说明 width 像素/百分比区块的宽度 auto height 像素/百分比区块的高度 auto min-height 像素/百分比区块最小高度 a

div套div 里面div有浮动外面div自适应高度

<div style="background-color:red;"> <div style="float:left;background-color:blue;width:100px;height:100px"></div> <div style="float:left;background-color:green;width:200px;height:200px"></div> &l

angularjs 怎么获取鼠标焦点鼠标移入显示浮动的div提示框

首先,我们要清楚几个基础的知识,angular的两个鼠标移入移出的指令------ng-mouseover(鼠标移入)ng-mouseleave(鼠标移出)--------还有就是window.event.x | window.event.y来获取鼠标的坐标x,y. 我是这么实现的,首先我们在html页面上绑定鼠标移入移出事件(因为是前端小白,大神们欢迎指正,相互学习哦),下面是我的源码下面是鼠标悬浮的小div js如下图给div的position设置成固定定位,然后修改它的top的值为鼠标

前端学习 -- Css -- 浮动

块元素在文档流中默认垂直排列,所以这个三个div自上至下依次排开,如果希望块元素在页面中水平排列,可以使块元素脱离文档流. 使用float来使元素浮动,从而脱离文档流可选值: none,默认值,元素默认在文档流中排列. left,元素会立即脱离文档流,向页面的左侧浮动. right,元素会立即脱离文档流,向页面的右侧浮动. 当为一个元素设置浮动以后(float属性是一个非none的值),元素会立即脱离文档流,元素脱离文档流以后,它下边的元素会立即向上移动:元素浮动以后,会尽量向页面的左上或这是

小技巧处理div内容溢出

前几天遇到一个问题,代码是这样一个层次: <div class="province"> <ul> <li>1</li> <li>2</li> <li>3</li> </ul></div> 我设置了div的边框, 要想ul的内容在边框内, 必须设置div高度. 但是,ul内的内容是变化的,内容少的时候就不及div的高

关于ie6中绝对定位或浮动的div中既有向左float也有向右float时候如何让外层div自适应宽度的解决方案--

一个详细的说明请见: http://www.cnblogs.com/yiyang/p/3265006.html 我的问题大约为,如下代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.or

浮动的div无论窗口大小变化都能居中显示的js

当div是浮动的时候浏览器窗口发生变化的时候不能居中显示(因为浮动的时候一般设定的有left或者right值) 可以先用jquery获取外围的div随浏览器变化而变化的宽度(加上监听事件) 之后再获取div的宽度例如: function autoWidth(){ var bW = $(".call_man").width();//外围的div var popWidth = (bW-150)/2 //(150是div的宽度) $(".rts").

div内容溢出

前几天遇到一个问题,代码是这样一个层次: <div class="province"> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> </div> 我设置了div的边框, 要想ul的内容在边框内, 必须设置div高度. 但是,ul内的内容是变化的,内容少的时候就不及div的高度. 不设高度的时候,ul的内容就出现在边框外了.

[Web 前端] 017 css 浮动

1. 文档流指盒子按照 html 标签编写的顺序依次从上到下,从左到右排列块元素占一行行内元素在一行之内从左到右排列先写的先排列后写的排在后面每个盒子都占据自己的位置 2. 浮动的特性浮动元素有左浮动(float:left)和右浮动(float:right)两种浮动的元素会向左或向右浮动,碰到父元素边界.浮动元素.未浮动的元素才停下来相邻浮动的块元素可以并在一行,超出父级宽度就换行浮动让行内元素或块元素自动转化为行内块元素浮动元素后面没有浮动的元素会占据浮动元素的位置对

让内层浮动的Div将外层Div撑开 -----清浮动

清浮动的好处写多了都能体会到,解决高度塌陷, 一般情况下是要清除浮动的,不然会影响下面标签的排版. <div class="parent" style="width:300px; background-color:Red;"> 测试 <div class="child" style="width:100px; height:100px; background-color:Green; float:left; margi

Js-Html 前端系列--点击非Div区域隐藏Div

最近做项目要用到三字码下拉,调用一个插件,但是滚动条不能点击. 后来看另一个插件后突发奇想,在点击其他区域的时候隐藏这个Div就可以了. 背景:输入文字,弹出下拉Div,点击或者拉动Div滚动条选择,但是要点击滚动条的时候会隐藏掉,也就是点击不了滚动条. 思路:写一个Document级别的事件,监听MouseDown事件,判断点击区域进行判断是否要隐藏这个下拉Div. JS版实现: $(document).bind('mousedown',function(event){ var $targ

【前端】webkit内核浏览器DIV滚动条样式修改和设置

webkit内核浏览器DIV滚动条样式修改和设置引言: 最近在做自己的小项目,为了设计出好看的页面费劲了心思,大到页面的整体布局,小到DIV的滚动条都不放过,以下是我通过查阅资料总结的webkit内核浏览器滚动条样式的修改方法. 原理: webkit浏览器css设置滚动条主要有下面7个属性 1. ::-webkit-scrollbar 滚动条整体部分,可以设置宽度啥的 2. ::-webkit-scrollbar-button 滚动条两端的按钮 3. ::-webkit-scrollbar-t

前端如何让浮动的div不溢出

热门专题